如何系統地學習 JavaScript？

引子：

要說學習JavaScript，首先要說到JavaScript這門語言本身的特質，簡直就是一門神奇的語言，他正在朝著萬能鑰匙的方向發展，只要會JavaScript，有一種走遍WEB開發無敵手的趕腳，且彷彿"非常簡單"。

先來看看JavaScript這些年都幹了什麼？

1、生產出一大堆庫：jQuery、MooTools、Prototype、Dojo、YUI、ExtJS、ZeptoJS......

2、生產出一大堆框架：AngularJS、VueJS、ReactJS、EmberJS、NuxtJS、ThreeJS......

3、生產出一大堆衍生語言：TypeScript、JSX、CoffeeScript......

4、ES6的誕生與發展：對於ES3/ES5來說，ES6就是一塊大大的語法糖......

反過來，我們來看看為什麼會出現如此廣的發展？

1、庫的產生原因

JS庫其實就是一堆函數接口，用了這些庫，很多JavaScript程序將不需要開發者寫，直接用庫函數接口來完成功能就搞定。

庫的出現證明前端程序的要求越來越高，複雜度也隨之增加，那麼用JS實現功能就會越來越難，一堆庫給你寫好了方法，你直接用，大大減少了程序開發週期。

2、框架的產生原因

JS框架就是JS的開發模式，更好、更合理的項目架構，使得項目易維護、易擴展，大部分框架還提供一套完善的數據與視圖綁定機制來優化了前端性能。

框架的出現證明了JavaScript本身的優點與缺點，優點是靈活，缺點也是靈活，可以靈活運用一門語言是多棒的一件事情，但是有時往往因為靈活導致開發者很難掌握合理的開發模式，怎麼寫都對，又不知道怎麼寫是對的。

3、衍生語言的產生的原因

JavaScript除了語法部分以外跟瀏覽器打交道最多的語言，這個特點就決定了他本身沒有特定的開發模式，導致沒有特定的開發規範，這一點導致了開發到了後期，很難進行維護和擴展，這時衍生語言就來解決這一難題了，他們乾脆把JavaScript改造成一套完全面向對象的語言。逼迫開發者用面向對象的思想和既定規則進行開發。

4、ES6的誕生

很多人認為ES6的誕生是JavaScript救命稻草，這不是沒有道理，首先，ES6引入了類的概念，但是這個類的概念也是閹割版；其次，ES6引入了模塊化的概念，使得JavaScript可以真正意義上分模塊開發且可相互依賴；再次，ES6對原本JavaScript的異步概念進行了加強，並針對性的增加了強有力的異步問題解決方案。

綜上所述，我們可以非常容易的整理一套學習方案。

學習方案：

第一彈：ECMAScript（JavaScript的基礎）

你可以理解他為JavaScript的本尊或者靈活，如果你認為它僅僅是個語法的盒子，那就錯了，它的本質是JavaScript開發的理論基礎和技術提升的踏板。對於初學者來說，這一關很難，但如果你翻過了這座大山，恭喜你，後面的內容你可以邊抽菸邊學習了，反之，還是放棄吧。

那我們來看看都要學些什麼？

1、編程語言、ECMA、JavaScript、瀏覽器的發展史

2、基本語法：值、變量、運算、語句等等

3、各種類型的函數、參數與原理

4、預編譯、暗示全局變量

5、作用域、作用域鏈、閉包

6、對象、構造函數、實例化

7、原型、原型鏈、對象繼承

8、對象、對象克隆

9、數組方法、類數組

10、自定義原型方法、碎片知識

11、錯誤信息、錯誤捕獲

12、嚴格模式

13、變量聲明週期、垃圾回收

第二彈：DOM（文檔對象模型，JS操作HTML用的（記住：JS是操作不了CSS的！！））

JavaScript跟瀏覽器關係真的不要太好（非常好的意思），但是如果把學習DOM理解為對DOM結構的增刪改查，那就太膚淺了。我們來看看DOM包含哪些內容呢？

1、掌握document對象、瞭解其中的方法的繼承關係（特別是相關原型的問題）

2、遍歷節點樹與遍歷元素節點樹（重考點）

3、節點的增刪改查、元素屬性的操作

4、滾動相關操作

5、樣式屬性相關操作

6、元素運動

（兼容性封裝！兼容性封裝！兼容性封裝！）

7、事件處理函數與綁定機制

8、事件的冒泡捕獲機制

9、事件對象與事件源對象

10、事件代理

11、模塊化與插件化開發的基礎

12、鼠標行為座標系與相關兼容性、功能性函數封裝

13、輸入與狀態改變事件

14、鼠標行為預測技術

15、鍵盤事件

16、DOM常見問題的解決方案與函數封裝

17、至少完成10個典型案例

第三彈：BOM（瀏覽器對象模型，JS操作瀏覽器用的，沒事兒彈個窗？沒孃的孩子最慘）

BOM一直是JavaScript特殊的存在，沒人搭理，卻時不時用用的存在。畢竟沒娘沒規範，所以很多內容都不在用了，但不代表你可以一點都不知道。職業素養！職業素養！職業素養！

1、window、Navigator、history、screen、location對象的屬性與方法

2、window、location對象深入學習

3、初步掌握單頁面應用的簡單開發

4、瀏覽器相關檢查

第四彈：正則表達式（匹配字符串用的，這個字符串是不是個E-mail呢？手機號是不是138開頭的呢？）

這個東西可以說相當於是一門小語言，難學、難記、難掌握，但是在關鍵時刻能給你解決大問題，往往需要大量代碼些的程序，用正則，1行搞定。

怎麼學？老老實實學，然後老老實實一次又一次的摳破頭皮用。

1、轉義相關、修飾與元字符

2、正則量詞、屬性、方法

3、正則相關的所有方法

4、正向預查、貪婪與非貪婪模式

5、replace方法、不捕獲分組

6、整個50個正則案例逐個分析

第五彈：JSON（一種很友好的數據格式）

長這樣舍爾滴 -> {"名字":"JS++","年齡":"18","婚否":"未婚"}

1、JSON數據認知與解析方法

2、JSON對象與字符串的轉換方法

3、AJAX的基本認知

4、數據渲染、模板渲染

5、數據緩存機制、數據緩存池

第六彈：瀏覽器（職業素養！職業素養！前端優化!）

很多開發者並不瞭解瀏覽器，這對於前端開發是非常非常可怕的一件事，因為你寫的東西能不能用，取決於你是否懂得根據瀏覽器相關的機制來優化你的程序

1、DOM/CSS/渲染樹

2、文檔的解析與加載

3、DOM相關回流與重繪

4、渲染引擎、聲明HTML與渲染模式

5、JS引擎的執行機制

第七彈：JS運動（就是用JS讓DOM元素各種動）

這個東西在實際開發中是基本用不到的，但你就不學了嗎？不行！！不行！！不行！！

為啥？JS運動是你瞭解動畫執行機制的唯一途徑，其次，是你提升JS編程邏輯能力的一個重要學習過程。

比如原生JS開發一個輪播圖，這是一個訓練綜合運用能力的過程。

當然相關的數學知識也要學一些喲~

1、JS運動的原理與機制

2、加速度、彈性運動

3、重力運動與拖拽效果

4、原生JS開發無縫輪播圖

第八彈：ES5數組擴展方法

ES3給了我們很多數組相關的方法，但覺得不夠，再給你加一些，方便你開發

ES3的數組方法回顧一下：

concat, join, pop, push, reverse, shift, slice, sort, splice, toString, unshift

ES5給我們擴展的方法：（都跟遍歷數組有關）

forEach, map, every, some, filer, reduce, reduceRight

學習內容：

所有ES5的數組擴展方法的使用場景與重寫（兼容性也得考慮考慮啦）

實戰肯定少不了，因為你要知道各個方法的使用場景。

特別是forEach、map、filter、reduce

第九彈：函數式編程

你如果順利走到這裡，恭喜你，基礎你已經學完了，但是函數式編程是你提升JS能力的又一座大山，這座山主要是理論太抽象，很多都沒有特別明顯的使用場景，它究竟是幹什麼的呢？它其實就是教你封裝一個又一個的函數完成一些比較複雜的功能。可以說是提升抽象函數的能力的利器集合。

1、純函數

2、函數組合、結合律、pointfree

3、高階函數

4、函數柯里化與封裝

5、偏函數與封裝

6、惰性函數與使用場景

7、緩存函數

8、函數防抖、函數節流（必會）

9、歸類函數（必會）

第十彈：碎片知識

我們學了這麼多東西，還要補充嗎？看了下面的這些，你就知道了，還差的遠呢？難受，香菇！！！

1、同步與異步加載的三種方法

2、放大與寬放大模式

3、call/apply/bind以及bind重寫（常考）

4、標籤的屬性與特性

5、Math方法

6、封裝byClassName

7、斷點測試、bug調試

8、圖片的預加載與懶加載

9、日期對象與計時器

10、this指向問題

11、DOM與虛擬DOM（常考）

第十一彈：網絡

我是前端程序員，我為啥要學網絡？這樣的問題經常被問，簡單！因為現在前後端開發分離了，分離不代表相互不搭理，分離既合作，合作就要相互瞭解對方個大概，其次，開發本身還會涉及到前後端聯調的問題，所以前端程序員一定要掌握基本的網絡知識。

1、服務器的搭建

2、網絡、URL、客戶端與服務端、域名

3、DNS/IP/TCP/UDP/HTTP/HTTPS

4、三次握手、四次揮手

5、www、http報文、請求方式、GET與POST

6、http狀態碼、accept與ContentType

7、緩存、長短連接、Content-Length、referrer

8、http版本、同源策略

9、同步與異步請求、混編的概念

10、AJAX以及原生JS封裝AJAX

11、AJAX版本、響應狀態、超時設置、同步與異步設置

12、6種跨域獲取數據的方法

13、iframe與網絡相關

14、cookie相關

15、cookie+token技術

16、相關典型實戰至少做8個

第十二彈：ES6（新的JavaScript版本）

作用在於引入了類、模塊的概念，對異步處理提出了新的方案，也對JS對象們擴展了很多方法，讓開發變得更加順暢。

1、新增語法

2、新增API

3、集合

4、異步

5、面向對象

6、這裡需要一個大的實戰去訓練自己

這是JavaScript要學習的內容，當然後續還有很多很多技術要學習。比如.......jQuery、HTML5技術、CSS3技術、什麼BootStrap、CSS擴展語言Less/Sass、Webpack工程化、Git、VueJS......

路漫漫其修遠兮，吾將上下而求索；