构建自己的前端知识体系

前言

在金庸的武侠世界中，习武之人讲究的是融汇贯通，打通自身经脉，才能达到内力生生不息。我虽非习武之人，但却是一名计算机从业者，需要足够扎实的理论基础才能撑得起各种实践。前端的知识太多太多，零零散散，需要从点到面去扩展，再由面到点的去深入，将这些知识联系起来构建自己的知识体系，加深理解，以便做到融会贯通。构建自己的知识体系的时候，用自己的话，将这些知识讲出来，讲清楚，以达到加深理解，整个过程中逐渐融汇贯通，业精于勤荒于嬉，行成于思毁于随。

思维导图

github 地址

https://github.com/tflins/front-end-notes

前端基础

JavaScript

• 数据类型
  • 数据类型
  • 判断数据类型
  • null 和 undefined
  • == 和 ===
  • 四则运算
• 执行上下文、作用域、闭包
  • 执行上下文
  • 作用域链
  • 闭包
• this/bind/apply/call
  • JavaScript 中的 this
  • 如何改变 this 指向
  • bind 和 apply、call 的区别
  • 如何实现 apply、call
  • 如何实现 bind
• 原型、继承
  • JavaScript new 操作符的过程
  • 实现 new 操作符
  • JavaScript 的原型介绍
  • 原型链是什么
  • 如何实现继承
• Promise、async/await
  • Promise 是什么
  • 如何实现 Promise
  • async/await
  • async/await 和 Promise 的区别
• EventLoop
  • JavaScript 的 EventLoop
  • 浏览器的 EventLoop 和 node 的 EventLoop 的区别
  • 宏任务和微任务的区别
• 深浅拷贝
  • 如何实现浅拷贝
  • 如何实现深拷贝
• Ajax
  • 什么是 Ajax
  • 实现一个 Ajax

CSS

• position
• 行内元素/块状元素
• 盒模型
  • 什么是盒模型
  • 如何改变盒模型
  • 各个盒模型的好处
• BFC/IFC
• 外边距合并
• 居中和常用布局
• flex 布局

前端框架

vue

• mvvm
  • 什么是 mvvm
  • 对 mvvm 的理解
• vue 双向绑定的原理
• 生命周期
  • vue 的生命周期
  • 父子组件的生命周期
• $nextTick 的原理
• 组件通信
  • 父子组件通信
  • 祖孙组件通信
  • 兄弟组件通信
• 状态管理
  • 什么是状态管理，为什么需要状态管理
  • vuex 原理
• vue diff 算法
• vue computed、watch 原理
• 虚拟 DOM
  • 为什么需要虚拟 DOM

前端工程化

webpack

• webpack 是什么
• webpack 的构建流程
• loader 和 plugin
• webpack 层面如何做性能优化
• 介绍一下 webpack 的 dll

babel

• babel 的工作原理
• 介绍一下 AST

性能优化

持续更新中…