今天學(xué)堂君在整理相關(guān)web前端開(kāi)發(fā)自學(xué)知識(shí)的時(shí)候，發(fā)現(xiàn)了一些牛逼的web前端開(kāi)發(fā)工程師已經(jīng)幫我們整理出來(lái)非常方便收藏和學(xué)習(xí)的知識(shí)框架圖。非常的實(shí)用！無(wú)論你是web前端工程師 還是打算進(jìn)入或者轉(zhuǎn)型web前端開(kāi)發(fā)行業(yè)的童鞋們來(lái)說(shuō)，是非常不粗的指路燈！

把整個(gè)web前端開(kāi)發(fā)所需要的知識(shí)都之中在一個(gè)視圖中，形成一個(gè)完整的web前端知識(shí)體系，目的是想要顛覆人們對(duì)于前端只有三大塊（html、css、js）的認(rèn)識(shí)——做web前端需要的比這三大塊要多得多。

查看高清完整的web前端開(kāi)發(fā)知識(shí)框架圖：立即預(yù)覽

同時(shí)25學(xué)堂跟大家分享解讀一下這張完整的web前端開(kāi)發(fā)知識(shí)框架圖是如何整理的？

1、分類(lèi)

所有知識(shí)框架，那肯定是一個(gè)結(jié)構(gòu)型的展現(xiàn)，就是一棵樹(shù)。web前端的知識(shí)點(diǎn)非常多，也非常散，需要好幾層結(jié)構(gòu)來(lái)組織這個(gè)體系，否則就會(huì)顯得很亂。那么如何組織、把誰(shuí)和誰(shuí)放在一塊兒？這是真正值得我們?nèi)ニ伎嫉?，你也可以自己?lái)思考一下這個(gè)問(wèn)題。

在我總結(jié)的這個(gè)知識(shí)框架中，首先第一層我劃分為：理論知識(shí)，類(lèi)庫(kù)框架，編碼開(kāi)發(fā)，運(yùn)行環(huán)境。如下圖：

接下來(lái)給大家解釋一下：

這個(gè)圖要從下往上看，為何？——因?yàn)橄旅媸巧厦娴幕A(chǔ)；

首先，我們需要一定的理論知識(shí)，不管是你聽(tīng)別人講授、自己看書(shū)還是網(wǎng)上淘資料，你都需要一定的理論知識(shí)，每一種程序開(kāi)發(fā)，都避免不了。

第二，有了這些理論知識(shí)我們就可以編碼了——不錯(cuò)——but，沒(méi)有人能抵擋住第三方框架和類(lèi)庫(kù)的誘惑，例如jquery；

第三，有了這些理論知識(shí)和協(xié)助我們的類(lèi)庫(kù)框架，我們就可真正的編碼了。大家可能以為編碼開(kāi)發(fā)不就是寫(xiě)代碼嗎，還有啥？——這里面道道多著呢；

最后，開(kāi)發(fā)程序的目的，最終是為了能高效、穩(wěn)定的運(yùn)行在相應(yīng)的環(huán)境中，這其中又有哪些事情需要我們?nèi)プ觯空?qǐng)期待；

2. 理論知識(shí) 包括“軟知識(shí)”和“硬知識(shí)”

“軟知識(shí)”和“硬知識(shí)”大家可能覺(jué)得詞陌生，其實(shí)我一說(shuō)大家就能明白。

所謂“軟”的就是能在各個(gè)程序開(kāi)發(fā)中都用到的，算是基本功、內(nèi)功，例如數(shù)據(jù)結(jié)構(gòu)、算法、設(shè)計(jì)模式、面向?qū)ο蟮鹊龋?/ul>

 

所謂“硬”的就是能直接用于本程序開(kāi)發(fā)的。用C語(yǔ)言你就得學(xué)C語(yǔ)言語(yǔ)法，此時(shí)學(xué)java沒(méi)用。我們web前端開(kāi)發(fā)所需要的硬知識(shí)其實(shí)都包含在三個(gè)標(biāo)準(zhǔn)里面：

http標(biāo)準(zhǔn)、W3C標(biāo)準(zhǔn)和ECMAScript標(biāo)準(zhǔn)

；

3. 聊一聊web前端開(kāi)發(fā)中的“硬知識(shí)”

“軟知識(shí)”的內(nèi)容非常多，也是我們大學(xué)時(shí)代學(xué)習(xí)的重點(diǎn)（沒(méi)學(xué)好是另回事兒，畢業(yè)再惡補(bǔ)）。我們本次主要討論的是web前端這一個(gè)方向，因此就點(diǎn)到為止，讓大家知道這些知識(shí)也在知識(shí)體系中扮演重要角色。

剛才說(shuō)道，硬知識(shí)有三個(gè)標(biāo)準(zhǔn)：http標(biāo)準(zhǔn)、W3C標(biāo)準(zhǔn)和ECMAScript標(biāo)準(zhǔn)，那咱們就挨個(gè)聊聊這三個(gè)標(biāo)準(zhǔn)。

3.1 http標(biāo)準(zhǔn)

為什么做web前端要了解http標(biāo)準(zhǔn)？——因?yàn)闉g覽器要從服務(wù)端獲取網(wǎng)頁(yè)，網(wǎng)頁(yè)也可能將信息再提交給服務(wù)器，這其中都有http的連接。web系統(tǒng)既然和http鏈接有瓜葛，你就必須去了解它。



我的意見(jiàn)是：你不必去非常了解http的詳細(xì)內(nèi)容，但是你要了解web前端開(kāi)發(fā)常用的一些http的知識(shí)——就是上圖中我列出來(lái)的那些。當(dāng)然，我知識(shí)列了一個(gè)綱，詳細(xì)內(nèi)容還得靠你自己去查閱（本文章講的是知識(shí)框架，不會(huì)涉及任何知識(shí)點(diǎn)的詳細(xì)內(nèi)容）

關(guān)于這方面的知識(shí)，建議去查閱《圖解http》這本書(shū)，淺顯易懂的講述了這些內(nèi)容，我曾經(jīng)也看過(guò)。

 

3.2 W3C標(biāo)準(zhǔn)

如果說(shuō)你只知道web前端的一個(gè)標(biāo)準(zhǔn)，估計(jì)肯定是W3C標(biāo)準(zhǔn)了（據(jù)我了解，貌似大部分人真的都只知道這一個(gè)標(biāo)準(zhǔn)）。它的內(nèi)容非常多，看看www.w3.org/TR/和http://www.w3school.com.cn/這個(gè)頁(yè)面。

寫(xiě)到這里讓我想起了一句話(huà)：2/8原則——20%的功能滿(mǎn)足80%的需求。我覺(jué)得這句話(huà)用到這里非常合適，我們?cè)谄綍r(shí)開(kāi)發(fā)過(guò)程中根本用不到這么多東西。反而，你要把平時(shí)用的多的東西搞懂了。

下圖的這些知識(shí)，我想不用再過(guò)多解釋了，這就是我文章開(kāi)發(fā)說(shuō)的“三大塊”（html、css、js）?，F(xiàn)在你要知道，它們只不多是W3C標(biāo)準(zhǔn)的一部分，而W3C標(biāo)準(zhǔn)也只是web前端開(kāi)發(fā)知識(shí)體系中的一部分而已。

（下圖沒(méi)有完全展開(kāi)，想看權(quán)展開(kāi)的圖，可下載本文一開(kāi)始提供的附件）



 

3.3 ECMAScript

簡(jiǎn)稱(chēng)ES，寫(xiě)全稱(chēng)太麻煩了。

有些人可能只知道javascript，而不知道ES——其實(shí)，js是在ES的基礎(chǔ)上，為web瀏覽器做了一部分封裝（增加了DOM操作、BOM操作等）。



如上圖中的這些概念，大家可能平時(shí)都在javascript中看到，其實(shí)他們是ES的內(nèi)容。只不過(guò)javascript繼承了ES的這些特性，并且javascript用的比較廣泛，因此才會(huì)在js中討論的多一些。

還是那個(gè)“2/8原則”。其實(shí)ES中的內(nèi)容也非常多，而且更新很快，現(xiàn)在都到ES6了。但是我上圖中列出來(lái)的這些都是最重要的概念。如果你不懂原型、閉包和作用域，那就說(shuō)明你還不完全了解ES，也就是不完全會(huì)用javascript。

 

4. 框架和類(lèi)庫(kù)

前面已經(jīng)描述完了web前端開(kāi)發(fā)所需要的理論知識(shí)。如何實(shí)踐呢？——不能蠻干——還得繞世界去看看，有哪些大牛已經(jīng)為我們做出了如此多的貢獻(xiàn)。

用下面的這些類(lèi)庫(kù)或者框架，能大大提高你的開(kāi)發(fā)效率。



首先，jquery一定是大部分web前端開(kāi)發(fā)者不可或缺的工具。而我利用jquery不僅僅停留在只使用它的API和插件上，我還會(huì)自己去寫(xiě)jquery插件，我還會(huì)去讀jquery的源碼、了解jquery的設(shè)計(jì)思路。如果你也能那樣做，請(qǐng)相信我，你會(huì)收獲到意想不到的效果。

如果有一個(gè)問(wèn)題：怎樣才能最最透徹的理解javascript的事件系統(tǒng)？最佳答案之一：讀幾遍（一遍可能讀不懂）jquery關(guān)于事件處理部分的源碼！

bootstrap不用再過(guò)多解釋了吧，從github上的排名也能看出道道來(lái)。甚至連我們公司的UI設(shè)計(jì)師，都從bootstrap上截圖作為素材。

fontAwesome是全世界最強(qiáng)大的圖標(biāo)系統(tǒng)。相比于css制作圖標(biāo)來(lái)說(shuō)，這個(gè)要好很多倍，不管是開(kāi)發(fā)、效率還是維護(hù)上。icomoon.io能讓我自定義選擇自己的圖標(biāo)文件。

requirejs和seajs這種模塊定義系統(tǒng)，也一定是你系統(tǒng)中不可或缺的。我曾經(jīng)看過(guò)一個(gè)教程，講師就說(shuō)：requirejs帶來(lái)了既jquery之后的第二次前端技術(shù)變革。

其他的，backbone、angular、react這些也慢慢的開(kāi)始發(fā)揮了他們的價(jià)值，此處精力有限就不再贅述了——但是，他們很重要——你至少要試著去了解它們。

 

5. 編碼開(kāi)發(fā)

要問(wèn)編碼IDE哪家強(qiáng)，當(dāng)然要屬微軟的visual studio！但是即便是微軟的VS最新版本，它也代替不了下面要說(shuō)的這套開(kāi)發(fā)環(huán)境。



如果你專(zhuān)門(mén)做web前端，就不要在用vs了，當(dāng)然要選擇sublime。寫(xiě)html語(yǔ)句還用手動(dòng)一條一條寫(xiě)嗎？你得需要zencoding的協(xié)助，否則效率太差了。

另外，針對(duì)html、css、js的壓縮、合并、語(yǔ)法檢查，文件的清除、復(fù)制這些操作，你還要手動(dòng)去做嗎？——你需要grunt或者gulp的幫助。

如果你的系統(tǒng)中有比較多的js代碼或者文件，請(qǐng)選擇一個(gè)合適的模塊定義規(guī)范——CMD / AMD

請(qǐng)用git來(lái)幫助你做文件版本管理，最簡(jiǎn)單的就是使用github。

調(diào)試、測(cè)試，也都有專(zhuān)門(mén)的工具，都是需要學(xué)的……

——我的天哪……這些字寫(xiě)到現(xiàn)在寫(xiě)的我的手都酸了，別說(shuō)要學(xué)習(xí)這些知識(shí)了——再也別說(shuō)我們web前端是“三大塊”了！

 

6. 運(yùn)行環(huán)境

當(dāng)系統(tǒng)真正到了運(yùn)行環(huán)境中，當(dāng)你覺(jué)得終于完事兒的時(shí)候，其實(shí)還有好幾個(gè)知識(shí)點(diǎn)需要你掌握?？聪聢D：



首先，你要知道web系統(tǒng)雖然大部分是在瀏覽器下運(yùn)行，但是js可能會(huì)被運(yùn)行在node環(huán)境。

在瀏覽器環(huán)境下，最重要的兩點(diǎn)是：web安全和性能優(yōu)化。需要注意的綱要我都列出來(lái)了，如果想了解推薦兩本書(shū)《白帽子將web安全》《高性能網(wǎng)站建設(shè)指南》等。

最后奉上完整的最實(shí)用的web前端開(kāi)發(fā)知識(shí)框架圖下載地址：http://pan.baidu.com/s/1gdEq0VL

 

最后，25學(xué)堂感謝王福朋的辛勤整理和分享。

王福朋 - 博客園地址：http://www.cnblogs.com/wangfupeng1988/p/4649709.html