十步零基礎JavaScript學習路徑

以前寫過一篇26天學通前端開發，內容主要講的就是前端學習路徑，今天再來寫一篇零基礎的JavaScript學習路徑，但願能幫編程零基礎的前端愛好者指明方向。

1、開發環境和JavaScript版本問題

開發環境越簡單越好，必定不要在這個環節浪費時間。

首先說編輯器的選擇，sublime text、vs code、atom、webstorm，還有HBuilder。新手入門的時候總想找一個最好的編輯器，其實這編輯器就和遊戲裏面選英雄同樣，沒有最厲害的，只有最適合你的，若是仍是拿不定注意，就選vs code吧，我感受這個對新手挺友好的。

瀏覽器就用chrome，而後就能夠開始擼代碼了。

關於JavaScript版本，我建議仍是從ES5開始學，有必定基礎以後再來看ES2015+的新特性。

2、基本語法

學編程語言和學天然語言有不少類似的地方，咱們得從最基本的單詞和語法開始學。

• 變量：如何聲明變量，如何給變量賦值。
• 數據類型：什麼是數據類型，數字與字符串有什麼區別。
• 運算符與表達式：經常使用的運算符有哪些？「=」、「==」與「===」的區別等等。
• 分支語句：if、switch
• 循環語句：for、while
• 函數：什麼是函數，什麼是參數，什麼是返回值。

這些基本語法必定要很是熟悉，要否則後續的學習會舉步維艱。

3、對象

對象是一個很是重要的概念，必定要靈活掌握：

• 對象：屬性的無序集合，當屬性值爲函數的時候，咱們叫這個函數爲對象的方法。
• 數組：元素的有序集合。瞭解數組的經常使用方法
• 日期對象：獲取年月日時分秒
• 數學對象：獲取隨機數
• 瞭解其餘對象：正則表達式、包裝對象，其實函數也是對象，不過這些簡單瞭解一下就行。

每一個對象都有不少方法，這些方法知道在哪裏查就好了，千萬不要去背，就像咱們學英語，必要的單詞要背，可是大部分單詞知道用詞典查就好了。

學習【基礎語法】和【對象】的過程比較枯燥，知識點之間銜接不是特別緊密，就像咱們小學一年級學習漢字同樣，每個字咱們都知道是什麼，可是卻不會把他們組合到一塊兒，因此小學纔會練習組詞，造句，再到寫做文。咱們把作的項目比做寫做文，那咱們還有一段路要走，切莫心急。

4、DOM

• DOM的樹狀結構
• 節點：元素節點、文本節點、屬性節點
• 節點關係：同級、父子級等等
• 獲取節點：querySelector、querySelectorAll等等
• 節點操做：增刪改查
• 事件綁定：事件流和事件委託應該瞭解一下

DOM提供的方法也不少，仍然不要過多的投入精力，新手自學老是會被這些大量的方法困擾，咱們要作的是對DOM有一個歸納性的瞭解，至於那些雜亂的接口，後續咱們徹底能夠用jQuery或框架代替。

（若是對DOM感興趣，能夠在技能掌握得稍微全面一些以後，再回來深刻學習也是能夠的，可是前期投入大量時間，確實會影響學習效率）

5、jQuery

jQuery是必需要會的，可是jQuery上手確實很簡單，用兩天時間瞭解一下jQuery的用法，而後就能夠利用jQuery實現各類頁面效果了，前期確定會磕磕絆絆，可是jQuery的資料有不少，一邊學一邊作就行。

6、JavaScript進階

jQuery熟練了以後，就能夠開始着手學習JavaScript進階一點的內容了：

原始類型與引用類型的區別
各類類型轉換和類型檢測
閉包：函數套函數，怎麼套本身都不蒙就好了。
原型：構造函數、原型屬性、基於原型的繼承是怎麼實現的。
this：能夠開個坑好好研究研究

7、瞭解node

node如今能夠說是前端必學的了，可是不是學用node作後臺，而是用node生態下的各類工具，順便借node瞭解一下後臺。

• 使用node開一個靜態服務器
• 使用npm下載第三方模塊
• webpack
• babel

最好能用express寫一個簡單的後臺程序（一個server.js就夠了），處理一些請求，這樣咱們學習ajax的時候就能夠本身寫後臺接口了，固然這須要有http協議的基礎知識。

8、ES2015+新特性

• 變量和常量：爲何要拋棄var？
• 結構賦值
• 箭頭函數
• 模塊化
• class
• 編譯

像promise，async/await函數等等這些，看本身能力了，有興趣看看，不看也不影響後面學習，可是，就算如今不學，這個後續也是要補的。

9、AJAX

簡單的說，瞭解一下http協議，知道什麼是請求，什麼是響應，get和post有什麼卻別，而後在學ajax，看看語法基本就會了。

• 用XMLHttpRequest發個請求，接個數據。
• 用jQuery發個請求，接個數據。
• json解析

知道這些就差很少了，後續不論是工做仍是學習，確定還會遇到不少問題，到時候再具體問題具體分析。

10、框架

react、angular、vue三選一，零基礎的初學者強烈推薦vue，若是是後臺轉前端推薦angular，若是技術型前端，推薦react。

這篇文章是給零基礎新手的，那天然就選vue比較好了。

尾聲

經過這十步，就能夠對JavaScript體系有一個總體的瞭解，而後重點向那個方向發展，就看本身愛好或是工做須要了。技術的道路很漫長，這只是一個起點。

關注微信公衆號：曉舟報告，視頻教程，日更中...截止目前，剛剛錄到函數，若是時間容許的話，上面的內容都會錄的，感謝你們的支持。

最後附上以前寫的JavaScript書籍測評。

若是對您有一點點幫助，請不要吝惜一個小小的【贊】！