前端技术全复习

发布于 2021-09-01  79 次阅读


1、CSS3 篇

  • CSS 布局
  • CSS3 新特性:选择器、过渡、动画 ss
  • CSS 选择器及其优先级问题
  • CSS 布局定位属性

2、JavaScript 与 ES6

  • JavaScript 教程
  • TS 基础教程
  • 推荐阅读书籍:《JavaScript 语言精粹》《你不知道的 JavaScript 秘密》《图解 HTTP》
  • 垃圾回收
  • JS 对象:深浅复制、堆栈
  • 面向对象编程:new、contructor、ES6 类
  • JS 数据类型
  • 函数式编程:词法环境、作用域链、闭包、递归、变量提升
  • 原型继承:proto、prototype、extends
  • JS 异步编程:Promise、Generator、async
  • ES6 新特性:Proxy、Reflect、装饰器
  • DOM 操作:jQuery
  • JS 事件:DOM 事件级别、事件委托
  • 事件循环:宏任务、微任务
  • Window 与 BOM:File、WebSocket、Worker
  • AJAX:XHR、HTTP、TCP、jsonp、前端安全
  • TypeScript:类型、面向对象
  • 数据结构
  • 算法:经典排序算法
  • 设计模式:23 种设计模式

3、Vue 全家桶

  • 声明式(入门)

    • 常用与自定义指定
    • 响应式原理
  • 组件化(深入)

    • 生命周期与每个阶段发生的事儿
    • 虚拟 DOM、Diff 运算
    • 计算属性、监听器
    • v-bind、v-on、v-slot
    • 全局与局部:过滤器、组件、混入、指令
    • v-model 封装类表单
    • 组件之间的通信方案(至少 6 种)
  • Vue 工程化

    • @vue/cli、vue.config.js
    • vue-loader、自主搭建 Vue 环境(webpack、babel、eslint)
    • vue-router(路由匹配规则、router-view、嵌套视图、路由守卫、路由元信息)
    • vuex(五大概念、工作流程)
    • vue 组件库:vant、element、ant-design-vue
    • Vue-Element-Admin 系统
    • 云服务部署
    • 各种第三方库(轮子)的集成
  • Vue 进阶(高级)

    • vue3.0 项目实战(@vue/cli、vite)
    • vue2.0 源码
    • vuex 源码、vue-router 源码
    • element 源码
    • element 二次封装、业务组件封装
    • 自己搭建 vue 架构(管理系统、webapp)
    • vue 生态环境多溜达、保持敏感度
    • 服务端渲染 Nuxt、Node
  • 第 1 定:第一步听明白面试官在问什么?如果没听明白,一定要再回问。

  • 第 2 定:马上开始思考,怎么用三句话(并列、递进、顺承)。

  • 第 3 定:回答时,一定要把面试官想听到的答案给它,然后做适当的引导。

4、React 全家桶

  • React 工程化

    • Webpack 环境(*)
      如何理解 wepback?什么是 Loader?什么是 plugin?
      有哪些打包优化策略?有哪些运行加速策略?
      如何构建多页面应用?本地服务?代理?
      代码分割(异步加载原理)?
      Babel,常用的预设、插件?
      eslint
    • create-react-app(npm run eject)
    • dva(6 个 api)
    • umi(基于 dva,零 api,配置式的)
    • ant-design-pro(基于 umi 的)
  • React 面试

    • JSX
    • React 有哪些定义组件的方式
    • 生命周期
    • setState((state,props)=>({}), callback) 异步和同步,新值是否与旧值,diff 运算,render()
    • props
    • 状态提升
    • 组合,不是继承
    • 事件绑定
    • 受控表单、文件上传是非受控
    • 高阶组件
    • 上下文
    • 代码分割(React-Router)
    • Hooks API
    • React-Router-Dom(v5 版本、v4 版本)
    • Mobx + Mobx-React
    • Redux + React-Redux(非常重要)
    • Antd 的使用
  • React 进阶(源码分析篇)

    • React、react-dom 源码
    • React-Router-Dom 源码
    • Redux、React-Redux、Redux-Thunk、Redux-Saga 源码
    • Mobx、Mobx-React 源码
    • Ant-Design 源码、造轮子
    • 深入学习 Webpack 底层原理

5、源码分析方法

1、中级偏上的开发水平:概念术语、基本实现思路
下载或拿到到源码、最好使用 build 后的单个文件进行阅读,从头到尾慢慢看,混个眼熟。(建议 5 遍以上) - Vue 源码分析的四大核心:compiler 编译器、响应式流程(Vnode, Watcher、Dep、Observer)、diff 运算、各种 API 的实现(指令、内置 API)。【使用 performane 控制台可以更好地研究 vue 代码的运行过程】
-> .vue 【使用 webpack、vue-loader、vue-template-compiler 等工具把.vue 转化成 vue 环境能识别的 ES5 代码】
-> template 字符串(包含有各种 vue 指令)进入 Vue 环境
-> new Vue() 进入 vue 运行环境(在浏览器中)
-> data 数据劫持,
-> AST 抽象语法树(某种程度你可以理解成虚拟 DOM)【在 vue 环境中,compiler 把 template 字符串编译成 AST】
-> 虚拟 DOM【_render 方法根据 AST 生成虚拟 DOM,保存在内存中】
-> 生成真实的 DOM【patch】【Watcher 更新视图】
-> 当前组件视图中发生 data 变化时【patch(oldVnode, vnode),收集脏节点的集合,返回 diff 之后的 vnode】【Watcher 更新视图】
-> 当前组合被销毁时(比如路由切换)【Dep 中响应依赖清除、Watcher 卸载、Vnode 中移除当前的组件节点……】

2、高级的开发水平:整体流程,搞懂局部细节
使用 src 源码进行分析,模块与模块的关系。
3、高级中高级:掌握思想,评价关键问题
模仿、优化、整合自己的思想智慧,做出符合时代或工作场景的框架。

6、React 源码资源推荐(冲刺 25+)

7、App 技术栈

(微信开发、RN、Taro、uniapp)

8、Nodejs

9、第三方库

echart、highcharts、地图、支付、websocket、客服工具、第三方开放平台。

  • 战略层面:就目前市场,选 React 是主流

博主好穷啊,快点支助一下吧 ε = = (づ′▽`)づ