一名大一前端人的入门路线

一、第一阶段

HTML 和 CSS

• 精通 HTML 的使用，熟悉 H5 常用标签及新特性。

• 了解 HTML 语义化 , 行内元素，块级元素，空元素。

• 了解常见浏览器内核，浏览器兼容问题

• 掌握 link 与 @import 的区别

• 掌握 CSS 的继承属性， position 的用法

• 了解外边距折叠，两种盒子模型， CSS 选择符， CSS3 新增伪类

• 熟练水平居中（ 9 种方法）和垂直居中（ 8 种方法）

• 掌握 display 的值和其作用

• 纯 CSS 创建三角形的原理

• 掌握 CSS 定义的权重，隐藏元素的方法

• 了解浮动和清理浮动

• 熟练圣杯布局，双飞翼布局的多种实现方式

• 了解 CSS3 的 animation 和 transition 属性

• 掌握 float ， flex ， grid 的使用 Github

• Github 的基本使用

• 申请自己的 Github 账号 绑定 Hexo 或者用 issue 写博客

选学部分

SVG 和 Canvas

自适应布局，手机端兼容问题

二、第二阶段

JavaScript

• 精通基本数据类型的基本使用，掌握 JavaScript 的基本规范

• 掌握常用的 DOM 和 BOM 操作

• 掌握 Ajax 和正则表达式的使用

• 了解 JSON 的语法，解析和序列化

• 熟悉浏览器的渲染过程， DOM 树和渲染树的区别

• 了解重绘和回流的区别和关系

• 熟悉变量提升和作用域以及闭包

• 掌握 JavaScript 的原型链，继承和 call ， apply ， bind 的使用

• 熟悉 js 创建对象的方式和 this 对象

• 熟悉事件的阶段和事件的基本使用（如事件代理）

• 熟悉 IE 的事件处理和 W3C 的事件处理有哪些区别

• 了解如何进行事件广播

• 能够自己写出函数节流和防抖，了解其应用场景和原理

• 了解内存泄露和垃圾回收方法

• 了解解决跨域的几种方式（ JSONP,CROS,Nginx 的反向代理）

• 熟练 ES6 新特性， Promise 等的使用

• 熟练使用异步处理函数

• 了解 localStroage 和 sessionStroage 以及 cookie 的区别

选学

Event Loop 的原理 Promise 的原理 手写 Promise IE 8 9 的兼容问题

三、第三阶段

Jquery

• 掌握 jquery 的基本使用

Linux 的安装

• 不推荐使用 Windows 开发，有 Mac 的用 Mac ，没 Mac 的装 Linux

• 安装 Node

• 可以买个服务器学生价一年也就 110 ，配置服务器

React

• 掌握 React 的 JSX 语法使用， React 的生命周期

• 精通组件的通信，函数柯里化，高阶组件

• 了解 setState 的基本原理， refs 的作用， key 的作用

• 掌握 React 的数据流管理，组件的状态（ state ）和属性（ props ）的区

别

• 了解受控组件和非受控组件， React 中与后端的通信

• 掌握 React-router 的使用

• 熟悉 React 构建组件的方式

• 前端代码的部署

选学

React 的源码 Diff 算法 Fiber 算法 VDOM 原理

四、 第四

阶段 Dva

• dva 的基本使用

• dva 数据流管理

• dva 路由管理

ant design

• 掌握 ant design 的基本使用

选学

ant design 的源码阅读 可以尝试写自己的 React UI 组件

Webpack

• Webpackde 的基本配置

• 了解 loader 和 plugin 的作用和基本使用方式

• 可以看看 parcel glup 等其他自动化构建工具

Redux

• Redux 比较抽象 比较难懂 大家耐心学习

• 了解 Redux 的数据流和基本使用

• 了解 Redux 中间件的原理，作用和使用方式（例如 Redux-thunk 还有

我自己瞎写的类似 dva 的中间件

选学

微信小程序

RN

五、第五阶段 数据结构和算法

• 二叉树的遍历最短路径 最小生成树

• 常见的排序算法常见的算法题目 （ Leetcode 中等难度一下）