學(xué)習(xí)最難的兩點(diǎn)，第一是接收信息，第二是歸納信息。現(xiàn)在是信息爆炸的時(shí)代，一個(gè)知識(shí)點(diǎn)，網(wǎng)絡(luò)上有無(wú)數(shù)的blog，論壇，問(wèn)答，也有無(wú)數(shù)相關(guān)的書本。學(xué)會(huì)甄別有效信息是很重要的一點(diǎn)。而有效信息的數(shù)量其實(shí)也很龐大，而且這些信息的呈現(xiàn)大多數(shù)并不適合自己，這時(shí)候就需要學(xué)會(huì)歸納和整理。運(yùn)用以上兩點(diǎn)，形成自己的知識(shí)體系。這其中，記錄blog是一項(xiàng)很重要的手段。在寫blog的過(guò)程中，你不僅能深刻的理解相關(guān)的知識(shí)點(diǎn)，構(gòu)建自己的知識(shí)體系。同時(shí)也形成了一條條索引，方便隨時(shí)查閱和復(fù)習(xí)。
我在寫 blog 的過(guò)程中，習(xí)慣用織網(wǎng)的方法去記錄和學(xué)習(xí)。將一個(gè)個(gè)知識(shí)點(diǎn)按深度連成一條條線，按廣度連成一條條線。然后這些線交織成一張大網(wǎng)，遇到問(wèn)題就能一網(wǎng)打盡。當(dāng)然，目前這張網(wǎng)織的還很基礎(chǔ)，但是起碼有了自己的脈絡(luò)和方向。而學(xué)習(xí)的過(guò)程，更需要堅(jiān)持，每天都要有正在進(jìn)行的項(xiàng)目和代辦項(xiàng)。踩好腳下的路，看清眼前的路。

1. 前端系列

作為一個(gè)前端程序員，前端知識(shí)當(dāng)然是必備的。這其中各種基礎(chǔ)和原理尤其重要，如果不懂這些，就變成了不斷去學(xué)會(huì)使用一個(gè)個(gè)新的框架和工具，到了一定程度，就很難有進(jìn)步。

1.1 JS系列

不用說(shuō)，重中之重。

1.1.1 JS入門難點(diǎn)解析

已完結(jié)，共13篇，雖說(shuō)題目是“入門難點(diǎn)解析”，但是難度卻不是“入門”，該系列深入地剖析了 JS 的各個(gè)概念與原理，看完以后你將會(huì)換一種方式去思考JS。
我認(rèn)為 JS 的難點(diǎn)主要是把握如下幾個(gè)概念，作用域，作用域鏈，原型，原型鏈，繼承，活動(dòng)對(duì)象，this，執(zhí)行環(huán)境，變量聲明，函數(shù)聲明。搞清楚這些概念的定義與他們之間的關(guān)系，也就不難理解那些看似復(fù)雜的 JS 代碼了。

1.1.2 JS原生引用類型解析

完善中，目前共完成7篇。完整列舉了 JS 中常用的原生引用類型的使用方法和屬性，掌握這部分知識(shí)，有助于我們寫出更加優(yōu)雅更高性能的代碼。
我認(rèn)為這一系列非常有必要去熟悉，JS 入門難點(diǎn)系列主要討論的是原理知識(shí)，而本系列著重介紹這些原生引用類型的使用方法和屬性。這兩者配合在一起，真的是無(wú)往不利。當(dāng)你遇到一些優(yōu)秀效果實(shí)現(xiàn)或者學(xué)習(xí)他人的代碼時(shí)，聯(lián)系這兩個(gè)系列所學(xué)的知識(shí)，你會(huì)發(fā)現(xiàn)代碼的邏輯會(huì)很清晰，而且他們往往并沒(méi)有看上去那么好。掌握這兩個(gè)系列，就可以帶著敬畏的心情，批判的態(tài)度去學(xué)習(xí)那些優(yōu)秀的代碼實(shí)現(xiàn)啦(??)。

1.1.3 ES6常用新特性學(xué)習(xí)

完善中，目前共完成4篇。這部分應(yīng)該算是 JS入門難點(diǎn)解析系列在新規(guī)范下的補(bǔ)充。
主要是分析了自己平時(shí)使用的較多的特性。這部分知識(shí)很有必要去學(xué)習(xí)，但是開(kāi)始學(xué)習(xí)階段沒(méi)必要求全，先大概了解一下新增的特性范圍，然后根據(jù)需要去深入研究一下常用的特性。當(dāng)然有些特性比如Promise和一些內(nèi)置對(duì)象的新特性在JS原生引用類型解析中已經(jīng)講過(guò)，另外比如模板語(yǔ)法這種比較簡(jiǎn)單實(shí)用的特性也沒(méi)有做介紹。

1.1.4 JS進(jìn)階系列

完善中，目前共完成3篇。我們常說(shuō)JS是一門面向?qū)ο蟮娜躅愋秃蛣?dòng)態(tài)類型語(yǔ)言。這個(gè)系列，我們分為三部分，第一部分講解JS的弱類型和動(dòng)態(tài)類型是指什么，第二部分分析JS面向?qū)ο蟮娜筇卣鳎谌糠治覀円黄鹛接懸幌翵S語(yǔ)言在使用時(shí)應(yīng)當(dāng)遵循的設(shè)計(jì)原則。

1.1.5 JS常用設(shè)計(jì)模式解析-舊

完善中，目前共完成2篇。隨著編程經(jīng)驗(yàn)的增加，維護(hù)更大更復(fù)雜的代碼模塊，需要的就不僅僅只是代碼功能性的實(shí)現(xiàn)，還需要關(guān)注代碼的復(fù)用性，擴(kuò)展性和可維護(hù)性。這個(gè)時(shí)候就需要用到設(shè)計(jì)模式。
這個(gè)系列只寫了兩篇，而且比較舊了，還是 es5 的方法再實(shí)現(xiàn)，所以開(kāi)了一個(gè)新的系列

1.1.6 JS常用設(shè)計(jì)模式解析

完善中，目前已完成 10 篇。記錄了一些常用的設(shè)計(jì)模式，使用 ts 完成，因?yàn)槠涓厦嫦驅(qū)ο蟮恼Z(yǔ)法特征。每一個(gè)設(shè)計(jì)模式，我都使用了詳細(xì)的示例，并配了 UML 圖。也算是順便強(qiáng)化了自己的繪圖能力。

1.1.7 JS待整理

完善中，目前共完成2篇。一些散落的知識(shí)點(diǎn)，等待串成線。

1.2. CSS系列

雖然現(xiàn)在很多大公司劃分了重構(gòu)，一些前端可能專注于JS邏輯的編寫了。但是不懂JS，又怎么去操作CSS呢？

1.2.1 CSS入門

已完結(jié)，共13篇。CSS的入門知識(shí)，很全面，由淺入深。適合新手入門。
在這個(gè)系列，我通過(guò)大量生動(dòng)形象的例子幫助理解和記憶，讓CSS理論學(xué)習(xí)變得生動(dòng)自然。當(dāng)然，這里面很多知識(shí)只是其表象，要想深入理解，還需要閱讀
CSS進(jìn)階系列。

1.2.2 CSS進(jìn)階

完善中 ，目前共完成12篇。CSS的進(jìn)階知識(shí)，扎根文檔，全面解析CSS的規(guī)則和設(shè)計(jì)思路。
怎么說(shuō)呢，這個(gè)系列的內(nèi)容我其實(shí)是不滿意的，因?yàn)楣居袑?duì)應(yīng)的重構(gòu)，所以CSS知識(shí)相對(duì)比較薄弱。在寫這個(gè)系列的時(shí)候，就缺乏生動(dòng)形象的的demo，也局限了根據(jù)經(jīng)驗(yàn)去發(fā)散思考的能力。主要是扎根文檔，甚至很多時(shí)候基本是在翻譯文檔。不過(guò)收獲其實(shí)也是很大的，CSS和JS不一樣，它其實(shí)側(cè)重的就是規(guī)則的運(yùn)用，所以歸根結(jié)底在于兩點(diǎn)：1. 深刻理解規(guī)范 2. 熟練靈活地運(yùn)用規(guī)范。
先說(shuō)第1點(diǎn)，深刻理解規(guī)范，這點(diǎn)我在查找資料的時(shí)候，真是深有體會(huì)。網(wǎng)上很多資料并不是最新的，基于CSS各個(gè)版本。另外，那些中文資料，很多慘不忍睹。而且不少錯(cuò)誤的內(nèi)容大家都不去驗(yàn)證，抄來(lái)抄去。所以，如果要查閱文檔，請(qǐng)一定一定看W3C英文原版，嘗試自己去解讀文檔。開(kāi)始培養(yǎng)自己看英文文檔和英文文章的習(xí)慣，算是寫這個(gè)系列最大的收獲了。至于第2點(diǎn)，無(wú)需多言，而且也正好是我目前的短板。
這個(gè)系列到這里我會(huì)暫停。我準(zhǔn)備寫CSS第三個(gè)系列，主題是關(guān)于布局實(shí)踐。等到知識(shí)積累足夠，我會(huì)回頭重新梳理這個(gè)系列。（其實(shí)這也是一種學(xué)習(xí)方式，理論聯(lián)系實(shí)踐，理論卡殼，就去實(shí)踐，實(shí)踐有疑問(wèn)，就夯實(shí)基礎(chǔ)。不要割離理論與實(shí)踐，要交叉并進(jìn)）

1.2.3 CSS常用布局實(shí)現(xiàn)

完善中，已完成5篇。該系列用于整理記錄常用的CSS布局實(shí)現(xiàn)。

1.2.4 CSS常用效果實(shí)現(xiàn)

規(guī)劃中

1.2.5 知名網(wǎng)站代碼分析

規(guī)劃中

1.3 vue 系列

1.4 React 系列

1.4.1 React 基礎(chǔ)知識(shí)

React 的文檔不怎么清晰，通讀其文檔并且重寫了一份，涉及一些簡(jiǎn)單的源碼和設(shè)計(jì)探討。

1.4.2 redux 和 dva

從 0 到 1，手寫了 redux 。dva 規(guī)劃中。

1.4.3 antd 和 antd pro

使用。

1.4.4 umi

使用。

2. 后端

目前主要是 node。

2.1 Node

規(guī)劃中。node 經(jīng)常在用，不過(guò)還沒(méi)看源碼。

2.2 數(shù)據(jù)庫(kù)

規(guī)劃中。目前僅用了 mongodb，計(jì)劃用一下 mysql。

3. 瀏覽器

3.1 待整理

目前已完成1篇。其實(shí)和 JS，CSS 有些交叉。因?yàn)橹饕胙芯康氖?BOM 和兼容性，還有瀏覽器渲染的原理以及一些特性。希望最終能涉及到內(nèi)核。

3.2 瀏覽器為契機(jī)貫穿前端知識(shí)點(diǎn)-大綱

好久沒(méi)寫 blog了，想要以瀏覽器為契機(jī)，對(duì)前端知識(shí)做一個(gè)梳理，先立個(gè)大綱，也算是立個(gè)flag，希望能完成。

4. 網(wǎng)絡(luò)

完善中，目前已完成1篇。相當(dāng)重要的一塊，主要是一些協(xié)議的知識(shí)，一些請(qǐng)求，緩存，跨域的知識(shí)。

5. Native

以前有過(guò) Android 的知識(shí)，不過(guò)真的快忘了，希望能撿起來(lái)。不過(guò)人的精力畢竟有限，所以這里的 Native 主要是說(shuō)的 JS Bridge。有研究過(guò)一點(diǎn) PhoneGap，不過(guò)只是為了使用，很快就忘了。這一塊必須要實(shí)踐和記錄。

6. 性能優(yōu)化

即將開(kāi)始。這是一個(gè)有追求的程序員必須了解的東西了，這一塊在著重了解和實(shí)踐，還沒(méi)有記錄下來(lái)，接下來(lái)會(huì)開(kāi)始該系列文章整理。

7. 工具

7.1 模塊打包工具

7.1.1 webpack

進(jìn)行中，目前已完成 24 篇。webpack 是最流行的模塊打包構(gòu)建工具了。其靈魂在于其豐富的插件，插件越多，功能越強(qiáng)大。目前參考一個(gè)視頻在基礎(chǔ)學(xué)習(xí)中，每一篇都親自動(dòng)手實(shí)踐，參考了很多資料，并不是照本宣科。

7.1.2 gulp

目前了解不多，準(zhǔn)備學(xué)習(xí)一下。

7.1.3 grunt

了解不多。

7.2 代碼管理工具

7.2.1 git

完善中，目前共完成1篇。自己用的最多的代碼管理工具了，習(xí)慣命令行。但是很多操作和問(wèn)題還沒(méi)有記錄。會(huì)逐步記錄

7.2.2 svn

以前使用過(guò)，但主要是用 GUI。

7.3 調(diào)試工具

7.3.1 chrome 開(kāi)發(fā)者工具

用的最多的工具了，但其實(shí)性能分析這一塊有待深入了解和學(xué)習(xí)。

7.3.2 charles

抓包工具。

7.3.3 fiddler

8. 算法

這一塊沒(méi)有放到 JS 里面，而是單獨(dú)羅列出來(lái)。因?yàn)樗惴ㄗ钪匾氖撬枷耄Z(yǔ)言只是實(shí)現(xiàn)這種思想的載體而已。這塊的東西，以前學(xué)的時(shí)候還不錯(cuò)，現(xiàn)在工作當(dāng)中用到的地方很少，都快忘光了。最近零星在看，準(zhǔn)備抽時(shí)間系統(tǒng)學(xué)習(xí)以下，沉淀下來(lái)。

9. 源碼學(xué)習(xí)

選取有代表性的前端框架，進(jìn)行源碼的學(xué)習(xí)。

9.1 lodash

9.2 vue

10. 輪子整理

10.1 實(shí)用代碼片段

10.2 實(shí)用的工具庫(kù)

10.2.1 路徑處理模塊

10.2.2 文件處理模塊

fse，glob

10.2.2 時(shí)間處理模塊

moment

10.2.23 輔助函數(shù)庫(kù)

underscore，lodash

11. 代碼質(zhì)量

11.1 eslint

11.2 stylelint

12. ast

12.1 babel

12.2 postcss

13.項(xiàng)目協(xié)作

13.1 gitlab

13.2 jenkins

13.3 wiki

13.4 自動(dòng)部署平臺(tái)

13. 實(shí)踐

最終我們的學(xué)習(xí)要落到實(shí)處。所以準(zhǔn)備選取一些有代表性的項(xiàng)目，由淺入深，系統(tǒng)地分析它們的搭建和優(yōu)化過(guò)程。主要是梳理不同種類的項(xiàng)目開(kāi)發(fā)流程，理解這期間框架為我們做了什么，以及為何會(huì)這么做，熟悉一些使用的插件和工具，能夠獨(dú)立完整快速地完成不同類型的項(xiàng)目開(kāi)發(fā)。目前規(guī)劃有如下五個(gè)項(xiàng)目：一個(gè)在線商城（在做），一個(gè)后管平臺(tái)（以前做過(guò)一部分），一個(gè)報(bào)表系統(tǒng)（在做），一個(gè)微信公眾號(hào)+聊天室（已上線，由于是商業(yè)版本，不方便演示，我會(huì)從不同的角度重新全棧開(kāi)發(fā)一個(gè)全新的），一個(gè)小程序（還沒(méi)有接觸）。

10.1 在線商城項(xiàng)目-six淘

完善中，目前共完成17篇。
一個(gè)spa網(wǎng)站，前端使用webpack + vue全家桶，后端使用node + express + mongodb + mongoose，服務(wù)器使用阿里云。主要目的不是為了搭建這個(gè)項(xiàng)目，而是用這個(gè)項(xiàng)目幫助自己貫穿知識(shí)點(diǎn)。
作為這個(gè)系列的第一部呢，我不打算直接拿一個(gè)完整的最終形態(tài)的項(xiàng)目出來(lái)，一行行去研讀，這個(gè)工作應(yīng)該是閱讀其他人源碼進(jìn)行學(xué)習(xí)時(shí)進(jìn)行的。我的想法是，用迭代的方法逐步實(shí)現(xiàn)一個(gè)項(xiàng)目。一開(kāi)始，我們前后端分離，使用mock數(shù)據(jù)進(jìn)行開(kāi)發(fā)，學(xué)習(xí)如何在脫離后端的情況下完成前端基本功能開(kāi)發(fā)，并且這個(gè)過(guò)程也是由淺入深的，逐步去理解框架封裝了什么，一些常用插件的功能和為什么要使用這些插件，如何實(shí)現(xiàn)路由，請(qǐng)求，數(shù)據(jù)mock，登錄等基本功能。這個(gè)過(guò)程中，我們逐步深入，慢慢優(yōu)化，力求每一步都清晰簡(jiǎn)明，有跡可尋。然后，我們開(kāi)發(fā)后端，學(xué)習(xí)后端的知識(shí)，包括mongodb的使用，將前后端貫通。下一步，我們將代碼部署到遠(yuǎn)程服務(wù)器，學(xué)習(xí)服務(wù)器的使用和代碼的部署流程。這所有的過(guò)程都不是一氣呵成，而是循序漸進(jìn)的，中間可能會(huì)階段性地修改甚至推翻之前的代碼。所以我會(huì)在github上進(jìn)行版本管理，方便查閱每一階段的代碼效果。by the way，隨著學(xué)習(xí)的深入和知識(shí)的沉淀以及技術(shù)的發(fā)展。這些東西可能會(huì)有不好或者錯(cuò)誤的地方，重要的是和大家一起感受一下代碼演進(jìn)的過(guò)程，行程分析問(wèn)題的思想。而且確實(shí)能力有限，若有錯(cuò)誤，請(qǐng)大家不吝賜教。

14. 前端新技術(shù)

前端技術(shù)日新月異，更迭快速。可能你一項(xiàng)技術(shù)你還沒(méi)有掌握，就有新技術(shù)取代了它。保持對(duì)前沿技術(shù)的敏感性，才不會(huì)被淘汰。