学习最难的两点，第一是接收信息，第二是归纳信息。现在是信息爆炸的时代，一个知识点，网络上有无数的blog，论坛，问答，也有无数相关的书本。学会甄别有效信息是很重要的一点。而有效信息的数量其实也很庞大，而且这些信息的呈现大多数并不适合自己，这时候就需要学会归纳和整理。运用以上两点，形成自己的知识体系。这其中，记录blog是一项很重要的手段。在写blog的过程中，你不仅能深刻的理解相关的知识点，构建自己的知识体系。同时也形成了一条条索引，方便随时查阅和复习。
我在写 blog 的过程中，习惯用织网的方法去记录和学习。将一个个知识点按深度连成一条条线，按广度连成一条条线。然后这些线交织成一张大网，遇到问题就能一网打尽。当然，目前这张网织的还很基础，但是起码有了自己的脉络和方向。而学习的过程，更需要坚持，每天都要有正在进行的项目和代办项。踩好脚下的路，看清眼前的路。

1. 前端系列

作为一个前端程序员，前端知识当然是必备的。这其中各种基础和原理尤其重要，如果不懂这些，就变成了不断去学会使用一个个新的框架和工具，到了一定程度，就很难有进步。

1.1 JS系列

不用说，重中之重。

1.1.1 JS入门难点解析

已完结，共13篇，虽说题目是“入门难点解析”，但是难度却不是“入门”，该系列深入地剖析了 JS 的各个概念与原理，看完以后你将会换一种方式去思考JS。
我认为 JS 的难点主要是把握如下几个概念，作用域，作用域链，原型，原型链，继承，活动对象，this，执行环境，变量声明，函数声明。搞清楚这些概念的定义与他们之间的关系，也就不难理解那些看似复杂的 JS 代码了。

1.1.2 JS原生引用类型解析

完善中，目前共完成7篇。完整列举了 JS 中常用的原生引用类型的使用方法和属性，掌握这部分知识，有助于我们写出更加优雅更高性能的代码。
我认为这一系列非常有必要去熟悉，JS 入门难点系列主要讨论的是原理知识，而本系列着重介绍这些原生引用类型的使用方法和属性。这两者配合在一起，真的是无往不利。当你遇到一些优秀效果实现或者学习他人的代码时，联系这两个系列所学的知识，你会发现代码的逻辑会很清晰，而且他们往往并没有看上去那么好。掌握这两个系列，就可以带着敬畏的心情，批判的态度去学习那些优秀的代码实现啦(😜)。

1.1.3 ES6常用新特性学习

完善中，目前共完成4篇。这部分应该算是 JS入门难点解析系列在新规范下的补充。
主要是分析了自己平时使用的较多的特性。这部分知识很有必要去学习，但是开始学习阶段没必要求全，先大概了解一下新增的特性范围，然后根据需要去深入研究一下常用的特性。当然有些特性比如Promise和一些内置对象的新特性在JS原生引用类型解析中已经讲过，另外比如模板语法这种比较简单实用的特性也没有做介绍。

1.1.4 JS进阶系列

完善中，目前共完成3篇。我们常说JS是一门面向对象的弱类型和动态类型语言。这个系列，我们分为三部分，第一部分讲解JS的弱类型和动态类型是指什么，第二部分分析JS面向对象的三大特征，第三部分我们一起探讨一下JS语言在使用时应当遵循的设计原则。

1.1.5 JS常用设计模式解析-旧

完善中，目前共完成2篇。随着编程经验的增加，维护更大更复杂的代码模块，需要的就不仅仅只是代码功能性的实现，还需要关注代码的复用性，扩展性和可维护性。这个时候就需要用到设计模式。
这个系列只写了两篇，而且比较旧了，还是 es5 的方法再实现，所以开了一个新的系列

1.1.6 JS常用设计模式解析

完善中，目前已完成 10 篇。记录了一些常用的设计模式，使用 ts 完成，因为其更符合面向对象的语法特征。每一个设计模式，我都使用了详细的示例，并配了 UML 图。也算是顺便强化了自己的绘图能力。

1.1.7 JS待整理

完善中，目前共完成2篇。一些散落的知识点，等待串成线。

1.2. CSS系列

虽然现在很多大公司划分了重构，一些前端可能专注于JS逻辑的编写了。但是不懂JS，又怎么去操作CSS呢？

1.2.1 CSS入门

已完结，共13篇。CSS的入门知识，很全面，由浅入深。适合新手入门。
在这个系列，我通过大量生动形象的例子帮助理解和记忆，让CSS理论学习变得生动自然。当然，这里面很多知识只是其表象，要想深入理解，还需要阅读
CSS进阶系列。

1.2.2 CSS进阶

完善中 ，目前共完成12篇。CSS的进阶知识，扎根文档，全面解析CSS的规则和设计思路。
怎么说呢，这个系列的内容我其实是不满意的，因为公司有对应的重构，所以CSS知识相对比较薄弱。在写这个系列的时候，就缺乏生动形象的的demo，也局限了根据经验去发散思考的能力。主要是扎根文档，甚至很多时候基本是在翻译文档。不过收获其实也是很大的，CSS和JS不一样，它其实侧重的就是规则的运用，所以归根结底在于两点：1. 深刻理解规范 2. 熟练灵活地运用规范。
先说第1点，深刻理解规范，这点我在查找资料的时候，真是深有体会。网上很多资料并不是最新的，基于CSS各个版本。另外，那些中文资料，很多惨不忍睹。而且不少错误的内容大家都不去验证，抄来抄去。所以，如果要查阅文档，请一定一定看W3C英文原版，尝试自己去解读文档。开始培养自己看英文文档和英文文章的习惯，算是写这个系列最大的收获了。至于第2点，无需多言，而且也正好是我目前的短板。
这个系列到这里我会暂停。我准备写CSS第三个系列，主题是关于布局实践。等到知识积累足够，我会回头重新梳理这个系列。（其实这也是一种学习方式，理论联系实践，理论卡壳，就去实践，实践有疑问，就夯实基础。不要割离理论与实践，要交叉并进）

1.2.3 CSS常用布局实现

完善中，已完成5篇。该系列用于整理记录常用的CSS布局实现。

1.2.4 CSS常用效果实现

规划中

1.2.5 知名网站代码分析

规划中

1.3 vue 系列

1.4 React 系列

1.4.1 React 基础知识

React 的文档不怎么清晰，通读其文档并且重写了一份，涉及一些简单的源码和设计探讨。

1.4.2 redux 和 dva

从 0 到 1，手写了 redux 。dva 规划中。

1.4.3 antd 和 antd pro

使用。

1.4.4 umi

使用。

2. 后端

目前主要是 node。

2.1 Node

规划中。node 经常在用，不过还没看源码。

2.2 数据库

规划中。目前仅用了 mongodb，计划用一下 mysql。

3. 浏览器

3.1 待整理

目前已完成1篇。其实和 JS，CSS 有些交叉。因为主要想研究的是 BOM 和兼容性，还有浏览器渲染的原理以及一些特性。希望最终能涉及到内核。

3.2 浏览器为契机贯穿前端知识点-大纲

好久没写 blog了，想要以浏览器为契机，对前端知识做一个梳理，先立个大纲，也算是立个flag，希望能完成。

4. 网络

完善中，目前已完成1篇。相当重要的一块，主要是一些协议的知识，一些请求，缓存，跨域的知识。

5. Native

以前有过 Android 的知识，不过真的快忘了，希望能捡起来。不过人的精力毕竟有限，所以这里的 Native 主要是说的 JS Bridge。有研究过一点 PhoneGap，不过只是为了使用，很快就忘了。这一块必须要实践和记录。

6. 性能优化

即将开始。这是一个有追求的程序员必须了解的东西了，这一块在着重了解和实践，还没有记录下来，接下来会开始该系列文章整理。

7. 工具

7.1 模块打包工具

7.1.1 webpack

进行中，目前已完成 24 篇。webpack 是最流行的模块打包构建工具了。其灵魂在于其丰富的插件，插件越多，功能越强大。目前参考一个视频在基础学习中，每一篇都亲自动手实践，参考了很多资料，并不是照本宣科。

7.1.2 gulp

目前了解不多，准备学习一下。

7.1.3 grunt

了解不多。

7.2 代码管理工具

7.2.1 git

完善中，目前共完成1篇。自己用的最多的代码管理工具了，习惯命令行。但是很多操作和问题还没有记录。会逐步记录

7.2.2 svn

以前使用过，但主要是用 GUI。

7.3 调试工具

7.3.1 chrome 开发者工具

用的最多的工具了，但其实性能分析这一块有待深入了解和学习。

7.3.2 charles

抓包工具。

7.3.3 fiddler

8. 算法

这一块没有放到 JS 里面，而是单独罗列出来。因为算法最重要的是思想，语言只是实现这种思想的载体而已。这块的东西，以前学的时候还不错，现在工作当中用到的地方很少，都快忘光了。最近零星在看，准备抽时间系统学习以下，沉淀下来。

9. 源码学习

选取有代表性的前端框架，进行源码的学习。

9.1 lodash

9.2 vue

10. 轮子整理

10.1 实用代码片段

10.2 实用的工具库

10.2.1 路径处理模块

10.2.2 文件处理模块

fse，glob

10.2.2 时间处理模块

moment

10.2.23 辅助函数库

underscore，lodash

11. 代码质量

11.1 eslint

11.2 stylelint

12. ast

12.1 babel

12.2 postcss

13.项目协作

13.1 gitlab

13.2 jenkins

13.3 wiki

13.4 自动部署平台

13. 实践

最终我们的学习要落到实处。所以准备选取一些有代表性的项目，由浅入深，系统地分析它们的搭建和优化过程。主要是梳理不同种类的项目开发流程，理解这期间框架为我们做了什么，以及为何会这么做，熟悉一些使用的插件和工具，能够独立完整快速地完成不同类型的项目开发。目前规划有如下五个项目：一个在线商城（在做），一个后管平台（以前做过一部分），一个报表系统（在做），一个微信公众号+聊天室（已上线，由于是商业版本，不方便演示，我会从不同的角度重新全栈开发一个全新的），一个小程序（还没有接触）。

10.1 在线商城项目-six淘

完善中，目前共完成17篇。
一个spa网站，前端使用webpack + vue全家桶，后端使用node + express + mongodb + mongoose，服务器使用阿里云。主要目的不是为了搭建这个项目，而是用这个项目帮助自己贯穿知识点。
作为这个系列的第一部呢，我不打算直接拿一个完整的最终形态的项目出来，一行行去研读，这个工作应该是阅读其他人源码进行学习时进行的。我的想法是，用迭代的方法逐步实现一个项目。一开始，我们前后端分离，使用mock数据进行开发，学习如何在脱离后端的情况下完成前端基本功能开发，并且这个过程也是由浅入深的，逐步去理解框架封装了什么，一些常用插件的功能和为什么要使用这些插件，如何实现路由，请求，数据mock，登录等基本功能。这个过程中，我们逐步深入，慢慢优化，力求每一步都清晰简明，有迹可寻。然后，我们开发后端，学习后端的知识，包括mongodb的使用，将前后端贯通。下一步，我们将代码部署到远程服务器，学习服务器的使用和代码的部署流程。这所有的过程都不是一气呵成，而是循序渐进的，中间可能会阶段性地修改甚至推翻之前的代码。所以我会在github上进行版本管理，方便查阅每一阶段的代码效果。by the way，随着学习的深入和知识的沉淀以及技术的发展。这些东西可能会有不好或者错误的地方，重要的是和大家一起感受一下代码演进的过程，行程分析问题的思想。而且确实能力有限，若有错误，请大家不吝赐教。

14. 前端新技术

前端技术日新月异，更迭快速。可能你一项技术你还没有掌握，就有新技术取代了它。保持对前沿技术的敏感性，才不会被淘汰。