web前端知識體系梳理

前言

如今是信息時代，通過 web1.0 時期、web2.0 時期到如今的移動互聯網時期，信息獲取愈來愈高效，坐着不動就會有大量的新聞、博客、資訊向你推薦而來。做爲一名靠譜的程序員，你免不了要查閱大量的文章、視頻和書籍來充斥你的知識量，不斷學習。可是如今網上大量的信息堆積起來，對於你來講意味着什麼？你如何去合理的篩選、梳理這些得到的信息，又如何去知道本身如今還缺什麼信息？

到這裏就應該提出本文的主題 —— 知識體系 。其實不管針對哪一個知識領域，它都是有一套完整的、成型的知識體系和標準做爲支撐的，例如數學、建築、醫學、機械等等，固然包括計算機編程，其中確定包括前端開發。

有了完善的知識體系，再來面對大量的信息獲取，你就知道每一個信息所說的知識點是屬於知識體系中的哪一個部分。同時，你也會很清楚本身哪些部分掌握的好，哪些部分掌握的很差，甚至哪些部分本身壓根都沒據說過。

如何構建知識體系

學習新的知識並不難，真正難的是你不知道本身如今還有哪些須要去學。

你也許學過 html css js jQuery webpack vue React nodejs git linux 設計模式 算法 …… 等各類前端開發須要的不少知識和技術，可是他們之間到底應該怎麼聯繫起來，能造成怎樣的知識網絡。以及，在這個知識網絡中，還有哪些是你沒有考慮到或者學會的。這確實是一個問題，須要你去主動思考，並且還要找到正確的方法。

下面向各位讀者分享一下個人分析方法。不過須要說明，這個問題的分析方法沒有標準答案，所以個人方法也不見得是最正確的，所以僅供參考。

基礎知識

也許你聽過 程序 = 算法 + 數據結構 這句話，那麼這句話是針對哪一種開發人員說的呢？是寫 js 的、寫 java 的仍是寫 C++ ？答案是針對全部的程序員，不管你是前端、客戶端、server 端，都適用。那麼這些針對全部程序員都適用的東西，就稱之爲基礎知識。

通常來講基礎知識分爲：

• 算法
• 數據結構
• 面向對象思想
• 設計模式

這部分我以爲是前端程序員最容易忽略的，由於只有複雜的邏輯處理才能讓這些知識有用武之地。從前端的最初時代到 jQuery 時代，受限於網速、瀏覽器、JS 引擎這些限制，JS 基本就是一個腳本，驗證一下表單、操做一下 DOM、修改一下樣式 ，沒有什麼複雜的業務邏輯。

可是如今不同了，網速愈來愈快、瀏覽器和 JS 引擎足夠強大，並且 vue React 等框架流行開來，使得前端 JS 的業務邏輯愈來愈大，這些基礎知識必須掌握。最後別忘了，nodejs 都盛行多年了，這可以讓 JS 運行到 server 了，和 php java 等幹同樣的事情。

最後補充一句。其實編程基礎也不止這幾個，像編碼、編譯原理、計算機組成、網絡等這些都是基礎，可是並不會和前端開發直接相關（或者和咱們平常開發相關性不大），這裏就再也不深究了。有興趣的讀者，能夠本身繼續補充。

標準

爲什麼要用 var 定義變量？爲什麼使用 document.getElementById 能夠獲取元素對象？你也許會回答：「瀏覽器就這麼規定的」。那麼繼續追問，瀏覽器爲什麼這麼規定？並且恰恰那麼多款瀏覽器都是這樣統一約定好的？—— 答案是有一些統一的標準限定着它們，瀏覽器必須按照這些標準來解析 JS HTML CSS 等語法。

若是瀏覽器不按照這些標準來解析怎麼辦？—— 請參見以前臭名昭著、如今沒落的 IE 瀏覽器

第一個標準是 ECMA-262 標準 ，JS 和 ES6 的基本詞法、語法都是這個標準來制定且推行的。忽略細節，其中比較重要的有：

• 原型和原型鏈
• 做用域和閉包
• 異步
• ES6 的新增語法（如模塊化、Class、Promise 等）

第二個標準是 W3C 標準 ，除了 JS 和 ES6 基礎語法，其餘經常使用的功能都是這個標準制定的，主要的包括：

• HTML
• CSS
• Javascript Web API （例如 DOM 操做、BOM 操做、事件綁定、ajax 等）
• HTTP 協議
• 存儲
• websocket
• JSON 和 XML
• 2D 3D

標準一方面指導開發人員如何寫代碼，一方面指導瀏覽器如何運行代碼。即，代碼和瀏覽器之間，就靠這個標準來緊密相連。

開發環境

開發環境是比較多變並且複雜的，也是最很差總結的一部分，每一個公司或者團隊使用的工具和環境可能都不同。可是根據咱們平常開發的基本順序，能夠歸納爲如下幾點：

• 代碼版本管理，如 git
• IDE ，如 sublime vscode vim 等
• 腳手架，如 vue-cli
• 構建工具，如 webpack
• 本地服務和 mock ，如 webpack-dev-server
• debug ，如用到 chrome 開發者工具、抓包、代理等
• 部署提測，各個公司都不同，基本原理都是將代碼壓縮而後上傳到測試機
• 單元測試
• 有時須要操做測試機，須要掌握 linux 基礎命令

運行環境

暫時先不考慮 nodejs 的話，前端代碼的運行環境主要分爲兩種。第一種是標準的瀏覽器環境，即運行在咱們常見的瀏覽器中。此處須要考慮的問題是：

• 加載和渲染過程，如面試中常被問的「請描述從輸入 url 到呈現出頁面的整個過程」
• 性能優化，如何更快的加載，如何更快的解析和渲染
• 安全問題，常見的有 XSS 和 CSRF
• 瀏覽器兼容性
• 響應式佈局

第二種是運行在非標準的瀏覽器環境，即一個特定 app 的 webview 中。例如頁面在微信中展現，或者 hybrid 形式。這種狀況除了要考慮上述的幾個問題以外，還應該再考慮：

• hybrid 如何發佈和更新，雖然這是一個前端、server 端和客戶端共同解決的問題
• js-bridge 的使用和原理，例如微信 JSSDK 的使用

框架和庫

以上四個部分總結完以後，你會發現遺漏了一塊很重要的內容，就是框架和類庫，例如 vue React jQuery underscore 等。這也是我本身在總結過程當中遇到的一個問題。

若是你不仔細思考的話，你會很容易將「框架和庫」列爲第五項，和前四項並列，可是我不敢苟同。讓咱們來仔細分析如下就知道了，就拿列出的這四個例子：

• vue 最主要的功能就是 MVVM 和組件化。 MVVM 是 MVC 的一種變異或者微創新，MVC 又是設計模式的一種組合形式，所以 MVVM 確定是和設計相關的。組件化和麪向對象基本都是同一個思想，是面向對象思想在前端 view 層應用的一種體現，所以組件化是和麪向對象相關的。最後，vue 這個框架，實際上是設計、面向對象的一種具體體現，它應該歸屬於基礎知識的一部分。包括它的依附項目，如 vuex vue-router 等。
• React 和 vue 同理，只不過是更加純粹的組件化，沒有 MVVM ，這裏再也不贅述。
• jQuery 功能豐富，其 API 光標題就能沾滿一頁。咱們最經常使用的就是 DOM 操做和 ajax
  ，從上面分析得知這二者都是 JS Web API 的內容。所以 jQuery 應該屬於 JS Web API 這部分。
• underscore 或者 lodash ，就是一個基礎函數庫，它只和最基礎的語法有關，所以它應該屬於 ECMA 標準的一個擴充。

最後再想一下，若是真的把「框架和庫」做爲第五項單獨拿出來，前端開發中可用的框架和庫那麼多，不得把這部分給撐爆了？—— 這樣明顯不是一個合理的設計。任何框架和庫的出現，都是爲了知足咱們平常開發的效率和設計，說白了都是對已有方式的一種改進和補充（由於基礎和標準不常變），所以上文中的前四項，確定能找到它們各自的位置。

你們都對號入座，而不是扎堆在一塊兒。這纔是合理的設計。

知識體系腦圖

通過上文的分析，現畫出一個最終的腦圖，作一個彙總。不過這個圖的粒度仍是太粗，讀者能夠繼續細化、完善，而後歡迎共享給你們。

總結

與其說本文提供了一個前端知識體系，不如說提供了一個分析和完善知識體系的方法，很但願能看到各位讀者能繼續完善並總結出本身的知識體系。

其實還有不少前端涉及的知識沒有體現到該圖中，如 server 端的 nodejs ，和客戶端結合的 PWA RN 等，這些我還在思考如何以更加合理的方式歸入到體系中。