前言

对前端学习路线的总结,对自己已掌握技术以及后面应该学习的技术的参考。

前端入门

HTML

  • [x] 掌握基本元素
  • [x] HTML 语义化
  • [x] 行内元素与块级元素的区别
  • [x] HTML 新增元素
  • [ ] 媒体元素等,需要时查找下即可

CSS

  • [x] 基础用法,熟记各种属性
  • [x] CSS3 各种属性用法
  • [x] *FC,主要是 BFC。以及层叠上下文等了解内部机制
  • [x] 各种布局方法以及常用小技巧
  • [x] 预处理器,Sass、Less、Stylus 等
  • [x] 动画效果
    • transition
    • @keyframe
  • [ ] 编码规范以及性能优化

JavaScript

  • [x] DOM 熟记各种操作、属性
  • [x] BOM
  • [x] ES
    • 基本语法、数据类型、运算符等
    • 内置对象:Array、Object、Date、JSON、String、Number...,熟记常用的方法
    • 函数
  • [x] JS 事件
    • 熟悉两种绑定方式以及各种事件
    • 事件对象
    • 事件委托
    • 实现基本交互和特效

前端进阶

JS 进阶

  • [x] 作用域和闭包
  • [x] this 指向和原型链
  • [x] 正则表达式
  • [x] Ajax
    • 跨域,jsonp、CORS、
  • [x] 理解异步编程
    • 任务队列
  • [x] 面向对象编程
    • 封装、继承、多态
    • 属性读写权限、设置器、访问器
    • 工厂模式
    • 单例模式
    • 构造函数模式
    • 组合构造函数和原型模式
  • [x] 模块化
    • 模块化思想
    • AMD、CMD、CommonJS
    • RequireJS
    • ES6 Module
  • [x] jQuery 的学习
    • 封装方法和插件的思想
    • 简单封装自己的 DOM 操作库
  • [x] ES6+
    • let/const
    • 解构、剩余、Iterator
    • Set、Map、Symbol
    • 内置对象的拓展
    • 箭头函数
    • Promise
    • Generator、async、await
    • Class、Extends super
    • Proxy、reflect
    • Module

移动端适配

  • [x] 响应式布局
    • viewport、像素比等概念
    • 流式布局 和 rem 布局
    • 弹性盒子
    • 响应式图片
    • media query
  • [x] Bootstrap
    • 理解其栅格系统
    • 理解其类的定义和使用
  • [x] 移动端事件
    • touch
    • gesture
    • scroll

工程化

  • [x] Git
    • 常用命令:add/commit、push/pull
    • 分支:创建、切换、合并
    • 其他操作,需要时百度或者收藏一些
  • [x] GitHub、GitLab 等远程仓库
  • [x] Gulp
  • [x] Webpack
  • [x] rollup
  • [x] Linux 命令
  • [x] npm、yarn

框架

  • [x] 了解 MVC、MVP、MVVM 原理

  • [x] 组件化思想

  • [ ] Backbone.js

    • 限于了解 MVC
  • [ ] React

    • [x] 高阶组件
    • [x] React-Router
    • [x] Redux
    • [x] Ant Design
    • [ ] 中间件
    • [ ] SSR
  • [x] Vue

    • [x] Vue-Router
    • [x] Vuex
    • [ ] iView、element-UI、Mint-UI
    • [ ] SSR

性能优化

  • [x] CSS 重构
    • 选择器的使用及嵌套层级
    • 去掉无用代码、工具压缩
  • [ ] JavaScript 性能优化
    • [x] DOM 的回流和重绘
    • [x] 精简代码、工具压缩
    • [ ] 高性能的 JavaScript
  • [ ] 框架的性能优化
  • [ ] 服务器端渲染:SSR

JS 高阶

  • [ ] 设计模式
    • [x] 单例模式
    • [x] 工厂模式
    • [ ] 策略模式
    • [x] 观察者模式
    • [ ] 模板方法模式
    • [ ] 代理模式
    • [ ] 装饰者模式
    • [ ] 适配器模式
  • [ ] 函数式编程
  • [ ] 数据结构和算法
    • [x] 堆栈、队列
    • [x] 集合
    • [x] 二叉树
    • [x] 图
    • [x] 排序算法
    • [x] 查找算法
    • [ ] 动态规划
    • [ ] 贪心算法
  • [x] TypeScript
    • 类型系统
    • 接口
    • 模块和命名空间

全栈之路

后台语言

  • [ ] NodeJS
    • 核心概念
    • 核心模块
    • 处理请求
    • 中间件转发
  • [ ] Express/Koa 框架

数据库

  • [ ] MongoDB
  • [ ] MySql
  • [ ] GraphQL

部署

  • [ ] ngnix
  • [ ] pm2

数据可视化之路

SVG

  • [x] SVG 元素和属性
  • [x] d3 之 SVG

Canvas

  • [x] 原生 Canvas
  • [ ] d3 之 Canvas
  • [ ] Canvas 3d:WebGL
  • [ ] three.js:WebGL 封装库

原生 APP 之路

  • [ ] H5
  • [ ] 小程序
  • [ ] ReactNative
  • [ ] Cordova
  • [ ] Ionic
生命的意义不仅是活着,而是我们给别人的生命带来了何种不同。

© 2016-2019 destiny