本身總結的web前端知識體系大全【歡迎補充】

1. 前言

　　大約在幾個月以前，讓我看完了《webkit技術內幕》這本書的時候。忽然有了一個想法。

想把整個web前端開發所需要的知識都之中在一個視圖中，造成一個完整的web前端知識體系。目的是想要顛覆人們對於前端僅僅有三大塊（html、css、js）的認識——作web前端需要的比這三大塊要多得多。

　　拖了好幾個月了，但是由於最近將要參加的某一個活動。我不得不這兩天把這個東西整出來。

說幹就幹。

上午我就開始在辦公室畫草圖，亂七八糟的在那兒理思路。

　　

　　你們不要懼怕。事實上下文中的這個知識框架要比草圖中的好看的多。草圖你們權當沒看見。

　　好了，廢話不扯。如下請尾隨我本博客的內容，來看看web前端開發除了htm、css和js以外，還有哪些東西需要你一步一步去掌握。

　　

　　在看內容以前。先看一下這個知識框架的預覽圖。

圖太大很差展現，看不清除，可在此下載清晰版：http://pan.baidu.com/s/1hqIUvUc （內有整個知識體系的圖片和xmind文件）

　　

2. 分類

　　所有知識框架，那確定是一個結構型的展示，就是一棵樹。web前端的知識點許多，也很散，需要好幾層結構來組織這個體系，不然就會顯得很亂。那麼怎樣組織、把誰和誰放在一起？這是真正值得咱們去思考的。你也可以本身來思考一下這個問題。

　　在我總結的這個知識框架中。首先第一層我劃分爲：理論知識，類庫框架。編碼開發，執行環境。例如如下圖：

　　

　　接下來給你們解釋一下：

　　這個圖要從下往上看。爲什麼？——因爲如下是上面的基礎。

• 首先。咱們需要必定的理論知識，不管是你聽別人講授、本身看書仍是網上淘資料，你都需要必定的理論知識，每一種程序開發。都避免不了。
• 第二。有了這些理論知識咱們就可以編碼了——不錯——but。沒有人能抵擋住第三方框架和類庫的誘惑。好比jquery。
• 第三，有了這些理論知識和協助咱們的類庫框架，咱們就可真正的編碼了。

  你們可能覺得編碼開發不就是寫代碼嗎，還有啥？——這裏面道道多着呢。

• 最後，開發程序的目的，終因而爲了能高效、穩定的執行在對應的環境中。這當中又有哪些事情需要咱們去作？請期待。

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

　　「軟知識」和「硬知識」你們可能認爲詞陌生，事實上我一說你們就能明確。

　　

• 所謂「軟」的就是能在各個程序開發中都用到的，算是基本功、內功，好比數據結構、算法、設計模式、面向對象等等；
• 所謂「硬」的就是能直接用於本程序開發的。用C語言你就得學C語言語法，此時學java沒用。咱們web前端開發所需要的硬知識事實上都包括在三個標準裏面：http標準、W3C標準和ECMAScript標準；

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

　　「軟知識」的內允許多，也是咱們大學時代學習的重點（沒學好是另回事兒。畢業再惡補）。

咱們本次主要討論的是web前端這一個方向，所以就點到爲止，讓你們知道這些知識也在知識體系中扮演重要角色。

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

4.1 http標準

　　爲何作web前端要了解http標準？——因爲瀏覽器要從服務端獲取網頁，網頁也可能將信息再提交給server，這當中都有http的鏈接。web系統既然和http連接有瓜葛。你就必須去了解它。

　　

　　個人意見是：你沒必要去很瞭解http的具體內容。但是你要了解web前端開發常用的一些http的知識——就是上圖中我列出來的那些。固然，我知識列了一個綱。具體內容還得靠你本身去查閱（本文章講的是知識框架，不會涉及不論什麼知識點的具體內容）

　　關於這方面的知識。建議去查閱《圖解http》這本書，淺顯易懂的講述了這些內容，我之前也看過。

4.2 W3C標準

　　假設說你僅僅知道web前端的一個標準，預計確定是W3C標準了（據我瞭解。貌似大部分人真的都僅僅知道這一個標準）。它的內允許多，看看www.w3.org/TR/這個頁面。

　　寫到這裏讓我想起了一句話：2/8原則——20%的功能知足80%的需求。我認爲這句話用到這裏很合適。咱們在平時開發過程當中根本用不到這麼多東西。反而。你要把平時用的多的東西搞懂了。

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

　　（下圖沒有全然展開。想看權展開的圖，可下載本文一開始提供的附件）

　　

　　關於CSS的基礎知識，毛遂自薦一下本身以前的一篇系列博客：《CSS知多少》

4.3 ECMAScript　　

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

　　有些人可能僅僅知道javascript，而不知道ES——事實上。js是在ES的基礎上，爲web瀏覽器作了一部分封裝（添加了DOM操做、BOM操做等）。

　　

　　如上圖中的這些概念，你們可能平時都在javascript中看到，事實上他們是ES的內容。僅僅只是javascript繼承了ES的這些特性，並且javascript用的比較普遍。所以纔會在js中討論的多一些。

　　仍是那個「2/8原則」。

事實上ES中的內容也很是多，而且更新很是快。現在都到ES6了。但是我上圖中列出來的這些都是最重要的概念。

假設你不懂原型、閉包和做用域，那就說明你還不全然瞭解ES，也就是不全然會用javascript。

　　在此毛遂自薦本身以前的一篇系列博客。你們可以去參考：《深刻理解javascript原型和閉包系列》

5. 框架和類庫

　　前面已經描寫敘述完了web前端開發所需要的理論知識。

怎樣實踐呢？——不能蠻幹——還得繞世界去看看。有哪些大牛已經爲咱們作出瞭如此多的貢獻。

　　用如下的這些類庫或者框架。能大大提升你的開發效率。

　　

• 首先，jquery必定是大部分web前端開發人員不可或缺的工具。而我利用jquery不僅停留在只使用它的API和插件上，我還會本身去寫jquery插件，我還會去讀jquery的源代碼、瞭解jquery的設計思路。假設你也能那樣作，請相信我。你會收穫到意想不到的效果。假設有一個問題：如何才幹最最透徹的理解javascript的事件系統？最佳答案之中的一個：讀幾遍（一遍可能讀不懂）jquery關於事件處理部分的源代碼！
• bootstrap不用再過多解釋了吧，從github上的排名也能看出道道來。甚至連咱們公司的UI設計師。都從bootstrap上截圖做爲素材。

• fontAwesome是全世界最強大的圖標系統。相比於css製做圖標來講，這個要好很是多倍。不管是開發、效率仍是維護上。

  icomoon.io能讓我本身定義選擇本身的圖標文件。

• requirejs和seajs這樣的模塊定義系統，也必定是你係統中不可或缺的。我之前看過一個教程，講師就說：requirejs帶來了既jquery以後的第二次前端技術變革。
• 其它的，backbone、angular、react這些也慢慢的開始發揮了他們的價值。此處精力有限就再也不贅述了——但是，他們很是重要——你至少要試着去了解它們。

6. 編碼開發

　　要問編碼IDE哪家強，固然要屬微軟的visual studio。但是即使是微軟的VS最新版本號。它也取代不了如下要說的這套開發環境。

　　

　　假設你專門作web前端，就不要在用vs了。固然要選擇sublime。

寫html語句還用手動一條一條寫嗎？你得需要zencoding的協助，不然效率太差了。

　　另外。針對html、css、js的壓縮、合併、語法檢查，文件的清除、複製這些操做，你還要手動去作嗎？——你需要grunt或者gulp的幫助。

　　在此毛遂自薦本身的教程《用grunt搭建本身主動化web開發環境》，講的比較具體，適合剛開始學習的人學習。

　　假設你的系統中有比較多的js代碼或者文件，請選擇一個合適的模塊定義規範——CMD / AMD

　　請用git來幫助你作文件版本號管理。最簡單的就是使用github。

　　調試、測試，也都有專門的工具，都是需要學的……

　　——個人天哪……這些字寫到現在寫的個人手都酸了。別說要學習這些知識了——再也別說咱們web前端是「三大塊」了！

7. 執行環境

　　當系統真正到了執行環境中，當你認爲最終完事兒的時候。事實上還有好幾個知識點需要你掌握。看下圖：

　　

　　首先，你要知道web系統儘管大部分是在瀏覽器下執行，但是js可能會被執行在node環境。

　　在瀏覽器環境下，最重要的兩點是：web安全和性能優化。需要注意的綱要我都列出來了，假設想了解推薦兩本書《白帽子將web安全》《高性能站點建設指南》

8. 其它

　　以上這些是全部的知識體系。假設你想成爲一名合格的、讓leader喜歡的程序員。你除了知道這些知識以外。我認爲還需要下面幾點：

• 要了解敏捷軟件開發流程（如SCRUM）和項目管理知識（如考取PMP），這也屬於一種「軟」知識吧；
• 要學會在網上和別人交流（博客、qq羣、開源項目），交流能讓本身看到本身的不足。
• 要學會自我檢討和自我學習。就像我現在同樣，試着本身總結一下屬於本身的東西，隨時檢討隨時進步。

-------------------------------------------------------------------------------------------------------------

歡迎關注個人教程：

《使用grunt搭建全本身主動web前端開發環境》《從設計到模式》《json2.js源代碼解讀視頻》

《深刻理解javascript原型和閉包系列》《css知多少》《微軟petshop4.0源代碼解讀視頻》

------------------------------------------------------------------------------------------------------------

也歡迎關注個人開源項目——wangEditor，輕量化web富文本編輯器

-------------------------------------------------------------------------------------------------------------

隨機視頻聊天——chatyou.net

-------------------------------------------------------------------------------------------------------------