33.整理下我的前端知识结构

[ccforward]

整理下我的前端知识结构 ( Doing & ToDo )

这些都是在做的、在学的和准备做的知识点。以概念为主，每一点拿出来都可以做很深的扩展。

基础

• JS标准库 Object Array
• OOP 面向对象
• this 原型 继承
• 闭包
• 作用域
• HTML5 语义化
• CSS3 动画、技巧、模块化；常用Hack
• Flex 布局
• 浏览器渲染
• DOM操作

工具库

• jQuery zepto
• lodash
• underscore

主要还是透过lodash学习下函数式编程

框架

• Vue
• React
• Virtual DOM
• 状态管理：Redux Flux Vuex
• 路由：React-Router Vue-Router
• SPA 单页应用（有一个 Side Project）
• 框架的ui组件库
• MVVM的数据、DOM缓存
• 页面服务端渲染

主要还是以Vue为主，工作中用的比较多；
React 全家桶太多，处于不断学习的状态，把所有的API都用过，以个人项目、公司小项目使用为主；
Angular还是在2013年时候用过，现在基本忘光了，暂时也不打算放精力在上面。

ES6

• let const
• 解构赋值
• 字符串模板
• 数组、函数、对象扩展
• Set Map Iterator
• Generator 函数
• Promise 对象
• Class
• 模块 Module

工程化

• 规范：代码规范(eslint)，目录规范，测试预发上线规范，业务和逻辑分离等
• 自动化构建： Gulp Webpack npm (Vue+webpack+gulp的实践)
• 接口mock、数据模拟
• 内部组件库
• 自动化测试
• 性能优化：
  1. 代码层面：算法、页面渲染、重排重绘。。。
  2. 工程层面：静态文件管理、服务端渲染、缓存。。。
• 线上监控
• 线上历史版本管理

关于工程化，后面再单独写篇文章，总结下自己的实践、汇总下其他的方案。

Node

• 基本的API
• Express 中间件 路由
• 个人的爬虫项目 Node+Mongo+React(Vue)

设计模式

• 单例
• 观察者
• 工厂

其他

• 算法
• HTTP(1.1 2.0) websocket
• TCP
• 安全 CSRF XSS 同源策略
• 浏览器缓存
• Chrome 扩展（个人项目）