其實任何框架，都是用來解決開發中的某些實際問題的，比如 jQuery 是對原生 JavaScript 進行的封裝，提供了一些方便使用的方法和特性，以及一些兼容性問題的處理。但如果不瞭解原生 JavaScript 的流程控制、內置方法、運行機制等核心基礎，而直接去學習構建在這套體系之上的框架，那麼無異於架構空中樓閣，越看越迷糊、越學越迷茫、越走越艱難……
那麼，究竟要怎樣才能順暢的學習這些時下最流行的前端界寵兒呢？我們分別為大家一一介紹，先從 node.js 開始吧！
nodejs 的學前要求
首先需要明確的是 nodejs 其實是使用 JavaScript 基礎語法做了操作瀏覽器之外的事情，比如：php、java 等語言做的事情。簡單點說，在語法結構上和 JavaScript 是一致的，但是做的事情和 php、java 是一致的。那麼學習 nodejs 之前我們必須要掌握的知識是：
一、JavaScript 基礎，其實就是 ecmascript 部分，包括：
- 數據類型
- 運算符
- 類型轉換
- 流程控制
- 函數、閉包、回調、原型鏈等
- 事件機制
- 對象編程
二、對一些系統、網絡等知識需要有基本瞭解
- 文件系統（例如獲取文件信息、創建文件、文件訪問權限……，要是對此一頭霧水的同學，請自行度娘：文件系統）
- 網絡系統/協議（tcp/udp/http……）
- 操作系統（windows/Linux）
三、瞭解一些基本的系統命令和工具的使用
- cmd、Terminal（終端）工具
- ls(dir)、mkdir、rm、cd……等基礎命令
以後隨著學習的深入，還需要根據實際需求，要了解諸如“圖形圖像、字符編碼、數據庫”等相關的知識。 對照你個人的知識結構，你知道自己要從哪裡開始了嗎？
接下來，按照出場時間順序，我們再來看看 AngularJS、react.js、vue.js 的學習路徑。
AngularJS1.x 的學前要求
AngularJS 提供了一套前端開發模式，比如“模塊化、組件化、依賴注入”等，解決項目開發中結構組織的編寫問題。與 jQuery 類似的地方在於 AngularJS 是可以讓我們在開發中不需要過多的關注一些 DOM 操作、兼容性等內容，而專注於業務的處理，在學習 AngularJS 之前，你必須得知道什麼是數據類型、怎麼進行流程控制、如何進行前後端交互、如何處理解析數據等基礎知識，因為這些事情 AngularJS 或其他框架是不會去幫我們處理的。按照知識點類型來劃分，大體有三塊：
一、必須要非常熟悉下面這幾個知識點，我們才能處理用戶提交的數據、後端傳輸的數據，才能知道怎麼按照不同的業務去做不同的處理：
- 數據類型
- 運算符
- 類型轉換
- 流程控制
- 基本數據結構與處理（如數組、字符串、日期、集合等）
二、下面的知識點將幫助我們學會如何和後端進行交互，完成實際功能開發：
- http
- ajax
- CORS
- jsonp
- Promise、await/async
- comet、SSE甚至是WebSocket
三、框架基本都基於對象或面向對象進行開發，使用框架，我們至少得知道什麼是對象，如何面向對象，才能在框架基礎上解決問題，畢竟框架不是萬能的，實際開發中需要我們能夠有基於框架的擴展開發能力，這也是區別於他人的核心競爭力。具體至少包括以下幾個知識點：
- 對象
- 面向對象
- 組件等
AngularJS2 的學習要求
AngularJS2 是 AngularJS1.x 的昇華版，它繼承了 1.x 的基本概念和特性，如“模塊、組件、依賴注入”，同時又加入了一些新的功能特性，如“裝飾器、組件強化”等。最新版本的 AngualarJS 底層代碼基本全部重構了，並提供基於 JavaScript、Dart、TypeScript 的不同版本。當然，如果我們希望充分使用 AngularJS 的功能特性，推薦的是 TypeScript 的，那麼這個時候對學前要求會相對 1.x 來說有很大的提高，除了具備上述 AngularJS1.x 的要求以外，還需要：
- TypeScript：這個不用說，ng2 的基礎，TypeScript 是微軟開發的 JavaSript 的超集語言，它借鑑了 C# 等高級語言的語法特性
- ES2015+：可以說這是學習 TypeScript 必備的基礎了
- npm（node包管理工具） / gulp（工程化工具） / webpack（與 gulp 類似） / tsc（TypeScript預編譯工具） 等工具……
瞭解以上的知識點以後，就可以開始學習 AngularJS2 的開發了。應該說，相對於 AngularJS1.x 來說，AngularJS2 的學習曲線異常陡峭！
react 的學前要求
react 在思想層面上與 AngularJS 類似，但是更輕量，更專注於 UI（界面）層的封裝。既然是這樣，學習基礎也就與 AngularJS1.x 類似了，意味著如下知識必須牢牢掌握（複製了一段上面的文字，怕有些人跳過了 AngularJS1.x 直接看到這段來了）：
一、必須要非常熟悉下面這幾個知識點，我們才能處理用戶提交的數據、後端傳輸的數據，才能知道怎麼按照不同的業務去做不同的處理：
- 數據類型
- 運算符
- 類型轉換
- 流程控制
- 基本數據結構與處理（如數組、字符串、日期、集合等）
二、下面的知識點將幫助我們學會如何和後端進行交互，完成實際功能開發：
- http
- ajax
- CORS
- jsonp
- Promise、await/async
- comet、SSE甚至是WebSocket
三、框架基本都基於對象或面向對象進行開發，使用框架，我們至少得知道什麼是對象，如何面向對象，才能在框架基礎上解決問題，畢竟框架不是萬能的，實際開發中需要我們能夠有基於框架的擴展開發能力，這也是區別於他人的核心競爭力。具體至少包括以下幾個知識點：
- 對象
- 面向對象
- 組件等
但是，react 是構建於 ECMA2015 以及現代化工具基礎之上的，因此還需要了解：
- ES2015+
- npm（node包管理工具） / gulp（工程化工具） / webpack（與 gulp 類似）等工具……
vue.js 的學前要求
最後一個，國內神人尤雨溪的大作：vue.js，它的學前基礎與 react 完全一致（這回不復制了，大家對照上面的看就行），相比較 react 而言，它的語法結構更容易上手，我們不妨從簡單的兩段代碼來看看它們的差異：
上面兩段代碼實現了同一個東西，你能感受到它倆的差異嗎？什麼？你竟然說你感受不出來？好吧，簡單來說：
- 如果你計劃構建一個大型應用程序，請使用 React.js
- 如果你的應用需要儘可能的小和快，請使用 Vue.js
上述的大，特指：數據量大、訪問量大、業務邏輯龐大等，至於大到何種量級會導致在選擇 vue 還是 react 中間犯難？如果你一定要一個權威而又精準的答案？這就需要詳細瞭解二者底層的實現了。
綜上所述，你們是否對自己的技術基礎有了一個清晰認識？是要根據自己的追求去找尋答案？還是先去打牢 JavaScript 基礎？
閱讀更多 JS加加網 的文章
