構建完整的Web前端知識體系

最新 07-10

閑扯：

稍早些時日，看到一個小姐姐的昵稱，戲謔的講，「好大的C~~」（PS：妹子昵稱 CC）。於是，

「三十而立」時她會知道：「哼，不是什麼好鳥」。或者微笑：「謝謝你頂我啊」。

書歸正傳。

1. 寫在前面

CC講，cos你有日子沒更新了~我於是想把Web前端開發所需要的知識較為完善的展現在一個視圖中，形成一個相對完整的Web前端知識體系，順便顛覆一下很多初學者或者從業十數年的後端老鳥對Web前端只有三大塊（HTML、CSS、JavaScript）的認知——事實上做web前端需要的知識還有很多。

訥訥，言歸正傳。下面一起看看Web前端開發除了htm、css和js之外，哪些東西還需要你一步一步的掌握。

2. 分類

所有的知識框架，大體上都可以用一個樹形結構來展現。Web前端的知識點，零散而繁多。需要多層結構來組織這個體系，反之就會顯得凌亂。那麼如何組織、把誰和誰放在一塊兒？這是真正值得我們去思考的，你也可以自己來思考一下這個問題。

在我目前敘述的這個知識框架中，第一層劃分為：理論知識，類庫框架，編碼開發，運行環境。如下圖：

解釋一下：

這個圖要從下往上看，為什麼呢？——因為下面是上面的基礎；

首先，我們需要一定的理論知識，無所謂你是聽別人講授、自己閱讀再或者網上淘金，都需要一定的理論知識，每一種程序開發，都無可避免。

其次，有了這些理論知識我們就可以編碼了——是的——但是，很少人能抵擋住第三方框架和類庫的誘惑，例如，大家欲罷不能的jQuery；

再次，有了這些理論知識和類庫框架的協助，我們就可真正的編碼了。此時一定會有朋友講，編碼開發不就是寫代碼嗎，還有啥？——事實上，這裡面道道多著呢；

最後，開發程序的目的，最終是為了高效、穩定的運行在相應的環境中，而這其中又有什麼是需要我們去做的？請期待；

3. 理論知識包括「軟知識」和「硬知識」

「軟知識」和「硬知識」大家可能覺得詞陌生，其實我一說大家就能明白。

所謂「軟」就是能在各個程序開發中都用到的，算是基本功、內功，例如數據結構、演算法、設計模式、面向對象等等；

所謂「硬」就是能直接用於本程序開發的。用PHP語言你就得學PHP語言語法，此時學Java沒用/*這是我一直不會Java的理由嗎？^_°*/。Web前端開發所需要的硬知識其實都包含在三個標準裡面：http標準、W3C標準和ECMAScript標準；

4. 聊一聊Web前端開發中的「硬知識」

「軟知識」的內容非常多，也是我們大學時代學習的重點（沒學好是另回事兒，畢業再惡補）。我們本次主要討論的是Web前端這一個方向，因此就點到為止，只要你知道這些知識也在知識體系中扮演重要角色就可以了。

剛才說道，硬知識有三個標準：http標準、W3C標準和ECMAScript標準，那咱們就挨個聊聊這三個標準。

4.1 http標準

為什麼做Web前端要了解http標準？——因為瀏覽器要從服務端獲取網頁，網頁也需要將信息再提交給伺服器，這其中都有http的連接。web系統既然和http鏈接有瓜葛，而你恰好是做這一行的，你就必須去了解它。

我的建議是：你不必去非常了解http的詳細內容，但是你要了解web前端開發常用的一些http的知識——就是上圖中我列出來的那些。當然，我只是列了一個提綱，詳細內容還得靠你自己去查閱（本文所述為知識框架，不涉及任何知識點的詳細內容）

關於這方面的知識，你可以去看看《圖解http》這本書，淺顯易懂的講述了這些內容，我曾經也看過。

4.2 W3C標準

如果說你只知道Web前端的一個標準，cos猜想一定是W3C標準了（據我了解，貌似大部分人真的都只知道這一個標準）。它的內容非常多，看看www.w3.org/TR/這個頁面。

開發領域有一句很經典的一句話：2/8原則——20%的功能滿足80%的需求。我覺得這句話用到這裡非常合適，我們在平時開發過程中根本用不到這麼多東西。反而，你要把平時用的多的東西搞懂了。

下圖的這些知識，我想不用再過多解釋了，這就是文章開始講的「三大塊」（html、css、js）。現在你要知道，它們只是W3C標準的一部分，而W3C標準只是Web前端開發知識體系中的一部分。

4.3 ECMAScript

簡稱ES，寫全稱太麻煩了。

有些朋友知道JavaScript，卻不知道ES——其實，js是在ES的基礎上，為Web瀏覽器做了一部分封裝（增加了DOM操作、BOM操作等）。

如上圖中的這些概念，大家可能平時都在JavaScript中看到，其實他們是ES的內容。只是JavaScript繼承了ES的這些特性，並且JavaScript用的更廣泛，因此才會在js中討論的多一些。

我們所講的那個「2/8原則」。其實ES中的內容也非常多，而且更新很快，現在都到ES6了。但是我上圖中列出來的這些都是最重要的概念。如果你不懂原型、閉包和作用域，那就說明你還不完全了解ES，也就是不完全會用JavaScript。

5. 框架和類庫

前面已經描述完了web前端開發所需要的理論知識。如何實踐呢？——不能蠻幹——還得站在巨人的肩膀上。

合理使用下面的這些類庫或者框架，能大大提高你的開發效率。

首先，jQuery一定是大部分web前端開發人員不可或缺的工具。而我利用jQuery並沒有停留在使用它的API和插件上，我還會自己去寫jQuery插件，去讀jQuery的源碼、了解jQuery的設計思路。如果你也能那樣做，請相信我，你會收穫到意想不到的效果。如果有一個問題：怎樣才能最最透徹的理解JavaScript的事件系統？最佳答案之一：讀幾遍（一遍可能讀不懂）jQuery關於事件處理部分的源碼！

Bootstrap從github上的排名也能看出道道來。甚至很多公司的UI設計師，都從Bootstrap上截圖作為素材。

fontAwesome是全世界最強大的圖標系統。相比於css製作圖標來說，這個要好很多倍，不管是開發、效率還是維護上。icomoon.io能讓我自定義選擇自己的圖標文件。iconfont.cn阿里媽媽MUX傾力打造的矢量圖標管理、交流平台。

RequireJS和seajs這種模塊定義系統，也一定是你系統中不可或缺的。RequireJS帶來了繼jQuery之後的第二次前端技術變革。

其他的，Backbone、Angular、React、Vue這些現在發揮的價值你無法忽視，已經成為主流的JS框架。

6. 編碼開發

要問編碼IDE哪家強，當然要屬微軟的visual studio！但是即便是微軟的VS最新版本，它也代替不了下面要說的這套開發環境。