Web前端知識體系梳理

來自專欄猿論28 人贊了文章

前言

現在是信息時代，經過 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 等，這些我還在思考如何以更加合理的方式納入到體系中。

大家可以關注一下課程：

作者：雙越

鏈接：http://www.imooc.com/article/details/id/44129

來源：慕課網

本文原創發佈於慕課網 ，轉載請註明出處，謝謝合作

閱讀推薦：

【官方】手記欄目認證作者招募，長期有效，隨時報名！_慕課手記

有獎徵文006期 | 聊聊面試那些事兒？

推薦一個 PHP 管道插件 LeaguePipeline

微信小程序動畫兩種實現方式

知乎 - 發現更大的世界

推薦閱讀：