學(xué)習(xí)最難的兩點(diǎn)，第一是接收信息营勤，第二是歸納信息×橄樱現(xiàn)在是信息爆炸的時代，一個知識點(diǎn)葛作，網(wǎng)絡(luò)上有無數(shù)的blog寿羞，論壇，問答赂蠢，也有無數(shù)相關(guān)的書本绪穆。學(xué)會甄別有效信息是很重要的一點(diǎn)。而有效信息的數(shù)量其實(shí)也很龐大虱岂，而且這些信息的呈現(xiàn)大多數(shù)并不適合自己玖院，這時候就需要學(xué)會歸納和整理。運(yùn)用以上兩點(diǎn)第岖，形成自己的知識體系司恳。這其中，記錄blog是一項(xiàng)很重要的手段绍傲。在寫blog的過程中，你不僅能深刻的理解相關(guān)的知識點(diǎn)，構(gòu)建自己的知識體系烫饼。同時也形成了一條條索引猎塞，方便隨時查閱和復(fù)習(xí)。
我在寫 blog 的過程中杠纵，習(xí)慣用織網(wǎng)的方法去記錄和學(xué)習(xí)荠耽。將一個個知識點(diǎn)按深度連成一條條線，按廣度連成一條條線比藻。然后這些線交織成一張大網(wǎng)铝量，遇到問題就能一網(wǎng)打盡。當(dāng)然银亲，目前這張網(wǎng)織的還很基礎(chǔ)慢叨，但是起碼有了自己的脈絡(luò)和方向。而學(xué)習(xí)的過程务蝠，更需要堅(jiān)持拍谐，每天都要有正在進(jìn)行的項(xiàng)目和代辦項(xiàng)。踩好腳下的路馏段，看清眼前的路轩拨。

1. 前端系列

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

1.1 JS系列

不用說元咙，重中之重梯影。

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

已完結(jié)，共13篇庶香，雖說題目是“入門難點(diǎn)解析”甲棍，但是難度卻不是“入門”，該系列深入地剖析了 JS 的各個概念與原理赶掖，看完以后你將會換一種方式去思考JS感猛。
我認(rèn)為 JS 的難點(diǎn)主要是把握如下幾個概念，作用域奢赂，作用域鏈陪白，原型，原型鏈膳灶，繼承咱士，活動對象立由，this，執(zhí)行環(huán)境序厉，變量聲明锐膜，函數(shù)聲明。搞清楚這些概念的定義與他們之間的關(guān)系弛房，也就不難理解那些看似復(fù)雜的 JS 代碼了道盏。

1.1.2 JS原生引用類型解析

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

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

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

1.1.4 JS進(jìn)階系列

完善中，目前共完成3篇长豁。我們常說JS是一門面向?qū)ο蟮娜躅愋秃蛣討B(tài)類型語言钧唐。這個系列，我們分為三部分匠襟，第一部分講解JS的弱類型和動態(tài)類型是指什么钝侠，第二部分分析JS面向?qū)ο蟮娜筇卣鞲迷埃谌糠治覀円黄鹛接懸幌翵S語言在使用時應(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ù)性萧诫。這個時候就需要用到設(shè)計(jì)模式。
這個系列只寫了兩篇枝嘶，而且比較舊了帘饶，還是 es5 的方法再實(shí)現(xiàn)，所以開了一個新的系列

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

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

1.1.7 JS待整理

完善中幕垦，目前共完成2篇丢氢。一些散落的知識點(diǎn)，等待串成線先改。

1.2. CSS系列

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

1.2.1 CSS入門

已完結(jié)，共13篇猜嘱。CSS的入門知識衅枫，很全面，由淺入深朗伶。適合新手入門弦撩。
在這個系列，我通過大量生動形象的例子幫助理解和記憶论皆，讓CSS理論學(xué)習(xí)變得生動自然益楼。當(dāng)然猾漫，這里面很多知識只是其表象，要想深入理解感凤，還需要閱讀
CSS進(jìn)階系列悯周。

1.2.2 CSS進(jìn)階

完善中 ，目前共完成12篇陪竿。CSS的進(jìn)階知識禽翼，扎根文檔，全面解析CSS的規(guī)則和設(shè)計(jì)思路族跛。
怎么說呢闰挡，這個系列的內(nèi)容我其實(shí)是不滿意的，因?yàn)楣居袑?yīng)的重構(gòu)礁哄，所以CSS知識相對比較薄弱长酗。在寫這個系列的時候，就缺乏生動形象的的demo桐绒，也局限了根據(jù)經(jīng)驗(yàn)去發(fā)散思考的能力夺脾。主要是扎根文檔，甚至很多時候基本是在翻譯文檔茉继。不過收獲其實(shí)也是很大的咧叭，CSS和JS不一樣，它其實(shí)側(cè)重的就是規(guī)則的運(yùn)用馒疹，所以歸根結(jié)底在于兩點(diǎn)：1. 深刻理解規(guī)范 2. 熟練靈活地運(yùn)用規(guī)范佳簸。
先說第1點(diǎn)，深刻理解規(guī)范颖变，這點(diǎn)我在查找資料的時候生均，真是深有體會。網(wǎng)上很多資料并不是最新的腥刹，基于CSS各個版本马胧。另外，那些中文資料衔峰，很多慘不忍睹佩脊。而且不少錯誤的內(nèi)容大家都不去驗(yàn)證，抄來抄去垫卤。所以威彰，如果要查閱文檔，請一定一定看W3C英文原版穴肘，嘗試自己去解讀文檔歇盼。開始培養(yǎng)自己看英文文檔和英文文章的習(xí)慣，算是寫這個系列最大的收獲了评抚。至于第2點(diǎn)豹缀，無需多言伯复，而且也正好是我目前的短板。
這個系列到這里我會暫停邢笙。我準(zhǔn)備寫CSS第三個系列啸如，主題是關(guān)于布局實(shí)踐。等到知識積累足夠氮惯，我會回頭重新梳理這個系列叮雳。（其實(shí)這也是一種學(xué)習(xí)方式，理論聯(lián)系實(shí)踐妇汗，理論卡殼债鸡，就去實(shí)踐，實(shí)踐有疑問铛纬，就夯實(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ǔ)知識

React 的文檔不怎么清晰擒悬，通讀其文檔并且重寫了一份，涉及一些簡單的源碼和設(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)常在用，不過還沒看源碼澎语。

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

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

3. 瀏覽器

3.1 待整理

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

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

好久沒寫 blog了骑晶，想要以瀏覽器為契機(jī)痛垛，對前端知識做一個梳理，先立個大綱桶蛔，也算是立個flag匙头，希望能完成。

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

完善中仔雷，目前已完成1篇蹂析。相當(dāng)重要的一塊，主要是一些協(xié)議的知識碟婆，一些請求电抚，緩存，跨域的知識竖共。

5. Native

以前有過 Android 的知識蝙叛，不過真的快忘了，希望能撿起來公给。不過人的精力畢竟有限借帘，所以這里的 Native 主要是說的 JS Bridge。有研究過一點(diǎn) PhoneGap淌铐，不過只是為了使用肺然，很快就忘了。這一塊必須要實(shí)踐和記錄腿准。

6. 性能優(yōu)化

即將開始际起。這是一個有追求的程序員必須了解的東西了，這一塊在著重了解和實(shí)踐吐葱，還沒有記錄下來街望，接下來會開始該系列文章整理。

7. 工具

7.1 模塊打包工具

7.1.1 webpack

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

7.1.2 gulp

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

7.1.3 grunt

了解不多。

7.2 代碼管理工具

7.2.1 git

完善中榴鼎，目前共完成1篇伯诬。自己用的最多的代碼管理工具了，習(xí)慣命令行巫财。但是很多操作和問題還沒有記錄盗似。會逐步記錄

7.2.2 svn

以前使用過，但主要是用 GUI平项。

7.3 調(diào)試工具

7.3.1 chrome 開發(fā)者工具

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

7.3.2 charles

抓包工具闽瓢。

7.3.3 fiddler

8. 算法

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

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

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

9.1 lodash

9.2 vue

10. 輪子整理

10.1 實(shí)用代碼片段

10.2 實(shí)用的工具庫

10.2.1 路徑處理模塊

10.2.2 文件處理模塊

fse灿巧，glob

10.2.2 時間處理模塊

moment

10.2.23 輔助函數(shù)庫

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 自動部署平臺

13. 實(shí)踐

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

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

完善中裤唠，目前共完成17篇挤牛。
一個spa網(wǎng)站，前端使用webpack + vue全家桶巧骚，后端使用node + express + mongodb + mongoose赊颠，服務(wù)器使用阿里云。主要目的不是為了搭建這個項(xiàng)目劈彪，而是用這個項(xiàng)目幫助自己貫穿知識點(diǎn)竣蹦。
作為這個系列的第一部呢，我不打算直接拿一個完整的最終形態(tài)的項(xiàng)目出來沧奴，一行行去研讀痘括，這個工作應(yīng)該是閱讀其他人源碼進(jìn)行學(xué)習(xí)時進(jìn)行的。我的想法是滔吠，用迭代的方法逐步實(shí)現(xiàn)一個項(xiàng)目纲菌。一開始，我們前后端分離疮绷，使用mock數(shù)據(jù)進(jìn)行開發(fā)翰舌，學(xué)習(xí)如何在脫離后端的情況下完成前端基本功能開發(fā)，并且這個過程也是由淺入深的冬骚，逐步去理解框架封裝了什么椅贱，一些常用插件的功能和為什么要使用這些插件，如何實(shí)現(xiàn)路由只冻，請求庇麦，數(shù)據(jù)mock，登錄等基本功能喜德。這個過程中山橄，我們逐步深入，慢慢優(yōu)化舍悯，力求每一步都清晰簡明航棱，有跡可尋。然后萌衬，我們開發(fā)后端丧诺，學(xué)習(xí)后端的知識，包括mongodb的使用奄薇，將前后端貫通驳阎。下一步，我們將代碼部署到遠(yuǎn)程服務(wù)器，學(xué)習(xí)服務(wù)器的使用和代碼的部署流程呵晚。這所有的過程都不是一氣呵成蜘腌，而是循序漸進(jìn)的，中間可能會階段性地修改甚至推翻之前的代碼饵隙。所以我會在github上進(jìn)行版本管理撮珠，方便查閱每一階段的代碼效果。by the way金矛，隨著學(xué)習(xí)的深入和知識的沉淀以及技術(shù)的發(fā)展芯急。這些東西可能會有不好或者錯誤的地方，重要的是和大家一起感受一下代碼演進(jìn)的過程驶俊，行程分析問題的思想娶耍。而且確實(shí)能力有限，若有錯誤饼酿，請大家不吝賜教榕酒。

14. 前端新技術(shù)

前端技術(shù)日新月異，更迭快速故俐∠胗ィ可能你一項(xiàng)技術(shù)你還沒有掌握，就有新技術(shù)取代了它药版。保持對前沿技術(shù)的敏感性辑舷，才不會被淘汰。