標籤:sub 解釋 項目 事件處理 ide 原型 高效能 世界 從設計到模式
1. 前言
大約在幾個月之前,讓我看完了《webkit技術內幕》這本書的時候。突然有了一個想法。
想把整個web前端開發所須要的知識都之中在一個視圖中,形成一個完整的web前端知識體系。目的是想要顛覆人們對於前端僅僅有三大塊(html、css、js)的認識——做web前端須要的比這三大塊要多得多。
拖了好幾個月了,可是因為最近將要參加的某一個活動。我不得不這兩天把這個東西整出來。
說幹就幹。
上午我就開始在辦公室畫草圖,亂七八糟的在那兒理思路。
大家不要害怕。事實上下文中的這個知識架構要比草圖中的好看的多。草圖大家權當沒看見。
好了,廢話不扯。以下請尾隨我本部落格的內容,來看看web前端開發除了htm、css和js之外,還有哪些東西須要你一步一步去掌握。
在看內容之前。先看一下這個知識架構的預覽圖。
圖太大不好展示,看不清除,可在此下載清晰版:http://pan.baidu.com/s/1hqIUvUc (內有整個知識體系的圖片和xmind檔案)
2. 分類
全部知識架構,那肯定是一個結構型的展現,就是一棵樹。web前端的知識點許多,也很散,須要好幾層結構來組織這個體系,否則就會顯得很亂。那麼怎樣組織、把誰和誰放在一塊兒?這是真正值得我們去思考的。你也能夠自己來思考一下這個問題。
在我總結的這個知識架構中。首先第一層我劃分為:理論知識,類庫架構。編碼開發,執行環境。例如以:
接下來給大家解釋一下:
這個圖要從下往上看。為何?——由於以下是上面的基礎。
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前端開發所須要的理論知識。
怎樣實踐呢?——不能蠻幹——還得繞世界去看看。有哪些大牛已經為我們做出了如此多的貢獻。
用以下的這些類庫或者架構。能大大提高你的開發效率。
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喜歡的程式員。你除了知道這些知識之外。我認為還須要下面幾點:
- 要瞭解敏捷式軟體開發 (Agile Software Development)流程(如SCRUM)和專案管理知識(如考取PMP),這也屬於一種“軟”知識吧;
- 要學會在網上和別人交流(部落格、qq群、開源項目),交流能讓自己看到自己的不足。
- 要學會自我反省和自我學習。就像我如今一樣,試著自己總結一下屬於自己的東西,隨時反省隨時進步。
-------------------------------------------------------------------------------------------------------------
歡迎關注我的教程:
《使用grunt搭建全自己主動web前端開發環境》《從設計到模式》《json2.js原始碼解讀視頻》
《深入理解javascript原型和閉包系列》《css知多少》《微軟petshop4.0原始碼解讀視頻》
------------------------------------------------------------------------------------------------------------
也歡迎關注我的開源項目——wangEditor,輕量化web富文字編輯器
-------------------------------------------------------------------------------------------------------------
隨機視訊交談——chatyou.net
-------------------------------------------------------------------------------------------------------------
自己總結的web前端知識體系大全【歡迎補充】