前言

以下仅代表个人对前端学习方面的一些整理及知识点梳理，具体学习方式方法，还需根据个人能力做出相应调整。

前端技术栈体系相对庞杂，从应用角度出发 列此清单方便大家少走弯路，也警示自己还有很多东西需要在进一步去理解。

前端框架部分多描述 React 部分，Vue 及 Angular 部分希望大家补充。

Web 前端学习脑图

前端开发环境及工具

好物推荐

了解一下？

印记中文 — 印记中文出品，唯一与官方文档同步的中文文档
百度脑图 — 便捷的思维工具
bestof.js.org — The best of JavaScript, HTML and CSS
Awesomes — Web前端开发资源库
奇舞周刊 — 汇聚前端精华

基础篇

坐好，准备发车！

1. ES 5/6/7/8 …

基础要打好

你懂的，具体怎么学习，这个应该是仁者见仁智者见智。推荐夯实并且及时更新对 数组和对象 这两部分处理及操作的方法。原因是业务开发场景中打交道最多的就是对数组及对象的操作。

2. React / Vue / Angular

Web 前端开发中越来越成为必需品的非必需品

React
学习基本 API 在项目中越来越熟练的应用起来 阮一峰 React 系列（基于当时的 React 版本相对较低，应该比较官方文档）
React 小书 (React 入门神器)
React 开发规范 1.0 (项目中基本开发规范，还待完善)
1. 理解 React 组件化开发思想
2. 按着要求或者模仿已完成的页面功能进行开发
3. 组件模块化创建
4. 常用的生命周期函数常用: componentWillMount、render、componentDidMount
  可能会接触: componentWillUpdate、componentDidUpdate、componentWillUnmount、shouldComponentUpdate、componentWillReceiveProps
5. 数据传递 state、props
Vue

待补充，基本思路应该同上

Angular

待补充，基本思路应该同上

3. 框架(或库)相关

项目中引入的一些常用工具或者插件应该有所了解及使用

React + Redux (注：以下内容如果项目中没有引入可以放一放)
- react-router / react-router-dom 基本使用，需要撸文档或者 README
- redux 相关教程，需要了解及其基本使用
- react-redux 相关教程及使用
- prop-types 相关文档及使用
总体思路：先看项目中用到的工具或者插件，查看相关文档，学以致用
Vue
待补充，基本思路应该同上
Angular
待补充，基本思路应该同上

4. Css、Less、Sass、Stylus

其实 css 会越来越 NB 的，css 预编译器迟早药丸。注：以下内容如果项目中没有引入可以放一放

css 预编译器的基本使用简单撸文档即可
class 命名按着项目中相关规范进行
基本样式编写应该基于 class 而不是 id
flex 基本应用 flex 教程，这篇才是最棒的
对 important 以及内联样式尽量不使用
尽量用最少的 css 代码实现 UI 图需要展示的效果

留在最后：不仅仅简单的还原 UI 图，还应该与需求及 UI 及时沟通，确定他们想要实现的效果

5. 查看项目文件

先看项目的描述文件，即 README，了解项目开发相关及项目启动命令
再看项目入口文件，README 文件一般都有描述，了解整个项目的目录结构及组件依赖关系

6. NPM 基本使用

npm 的安装 前端开发环境及工具

npm 的使用按着项目中 README 文件描述操作即可

推荐以下常用命令

# 由于国内网络情况，推荐将 npm 源切换至淘宝镜像
npm config set registry https://registry.npm.taobao.org 

# 项目依赖安装
npm install 
# 简写
npm i 

# 将 xxx 安装到项目的基本依赖
npm install xxx --save 
# 简写
npm i -S xxx 

# 将 xxx 安装到项目的开发依赖
npm install xxx --save-dev 
# 简写
npm i -D xxx 

# 将 xxx 从项目的基本依赖中移除
npm uninstall xxx --save 
# 简写
npm uninstall xxx -S

# 将 xxx 从项目的开发依赖中移除
npm uninstall xxx --save-dev
# 简写
npm uninstall xxx -D

# 启动相关命令 其中的 xxx 代指 package.json 文件中 script 对象中的 key 值
npm run xxx

如果感兴趣，也可以了解一下 nrm (npm 源快速切换工具)

7. Git 基本使用

git 的安装 前端开发环境及工具

推荐以下常用命令

# 代码克隆 将代码从 http://xxxx 地址克隆到本地
git clone http://xxxx 
# 代码拉取
git pull

# 代码添加到本地
git add .

# 代码提交
git commit -m '本次提交描述信息'

# 将代码推送到 git 服务器
git push

8. DevTools 的基本使用

即 GoogleChrome 开发者工具

Elements 查看元素及样式
Console 查看控制台信息
Sources 对运行中的代码断点操作
Network 对运行中的代码进行数据查看及其他相关信息
Application 主要查看 LocalStorage、SessionStorage、Cookies 等其他信息

更多使用方式 点击查看

9. 编辑器调整

推荐使用 VSCode

推荐插件

GitLens — Git supercharged Git增强插件
Prettier - Code formatter 代码美化插件
Settings Sync VSCode 配置同步插件
TabNine 融入 AI 的代码提示插件
Live Server 快速启动本地服务插件
indent-rainbow 彩虹缩进插件

10. 了解网页在浏览器打开的大概过程？

此阶段应该了解或已经了解了上边这个问题。还没有？加油🆙

进阶篇

学习前端也是一场修行，希望这些能帮到你。

五花八门的各类插件

拥抱新事物，走向新高度，开阔视野。有从众心理，用的人多的，不一定是最好的，但一定是最靠谱的！

为什么要使用这些插件？
这些插件存在的意义是解决业务开发场景中的痛点，解放开发者，把更多的时间及思考用在业务当中去，做出用户满意度更高的产品，以应对市场的变化。从开发者角度来讲，减少造轮子的精力，也给自己更多的生活时间，何乐不为。从项目本身来讲，选择适合的插件，能提高开发效率，也能提高产品的稳定性。因为大多的插件都已经经历过很多产品的验证，自然而然稳定性也是毋庸置疑，群众的眼睛是雪亮的嘛。
插件该如何选择？
个人认为应该从以下几点去进行分析：
1. 分析实际业务场景，到底需要那些功能，哪些功能在你的认知范围能能找到适合的插件去满足。
2. 分析插件的相关社区及维护人员是否积极，最简单的就是去 github 上看一看问题多少，活不活越，维护积极不积极。
3. 插件的版本号，是不是已经发布稳定版本，更新日志是不是有规律性。
4. 还有是否易用，比如文档是否丰富、API 是否简单易理解
上边这么多条件都能满足，这款插件你不仅可以放心的使用，还可以研究其源码。
插件该怎么应用？
拿到一款插件，
1. 看 README 文件
2. 对照 README 文件看相关 demo 代码
3. 运行 demo 代码，打断点看看这个插件都做了那些、都能做那些
如果经历了以上三点，你还是一脸懵逼，可以百度、Google此插件的相关教程或者问问周围的同事。什么？周围的同事也是一脸懵逼？那我想说的是，这款插件不适合你们，请放弃…

未完待续。。。

最后修改于 2018-03-20

前言