近年來，前端技術的發展迅速，但因為前端知識面龐大，在實際學習當中往往無法理清其中的脈絡。下麵從各種庫、框架、插件的層面上，對前端知識點做一些簡單的梳理。從軟體工程上，將前端分為四個由淺及深的層面或階段。 一、基礎層（瀏覽器原生支持html/css/js） HTML超文本標記語言，用標簽構建網頁的內容 ...
近年來，前端技術的發展迅速，但因為前端知識面龐大，在實際學習當中往往無法理清其中的脈絡。下麵從各種庫、框架、插件的層面上，對前端知識點做一些簡單的梳理。從軟體工程上，將前端分為四個由淺及深的層面或階段。
一、基礎層（瀏覽器原生支持html/css/js）
- HTML超文本標記語言，用標簽構建網頁的內容。HTML5擴展了標簽及其功能。
- CSS層疊樣式表，控制頁面內容的表現。CSS3增加了更多的特效，比如文本效果和2D/3D轉換，以及動畫。
- JavaScript的原生API（包括DOM、BOM、Style樣式、Canvas、SVG、WebGL等）
有了這些以後，我們已經可以開發基本的網路應用了，但是會發現它們並不好用，或者說存在一些缺陷，有優化的餘地。
- 當前後端分離後，將數據填充到頁面，傳統HTML的拼接字元串的不太好用
- CSS不能像其他程式語言一樣，通過變數、計算、繼承等方式很好的管理。
- JS原生API不好用，還存在瀏覽器相容等問題。
本來這些問題，前端開發者只能默默的認了（因為自己不會製作客戶端軟體工具，NODE的出現將改變這一切），所以大部分精力就用來封裝基礎API製作各種庫，這就形成了第二個階段——框架層。
二、框架層（各類前端庫）
JQuery、YUI、Zepto、以及針對H5中canvas的游戲庫Lufylegend等等，主要為瞭解決瀏覽器原生API不好用和相容問題，即對原型API做了二次封裝，使其更易於開發和掌握，本質上其實並沒有變。在此基礎上，又針對一些常用的頁面組件，擴展了為插件，形成第三階段——組件層。
三、組件層（或插件）
常用的如：日曆選擇器、富文本編輯器、圖片輪播等等。僅僅這些還並不能適用於網路應用的全部，一些平臺的業務邏輯屬於——應用層
四、應用層（業務層）
如登陸註冊，後臺管理等等，應用層的業務邏輯通常跟後臺關係密切。
如上只是傳統的開發模式，隨著前後端的分離，前端開發分擔了越來越多業務邏輯。通過ajax或jsonp等方式與後臺交互數據，然後通過拼接字元串的方式，生成瀏覽器識別的DOM結構與樣式。這些都讓前端開發越來越重，但js本身不能很好的實現模塊化管理，所以出現了require、sea等AMD和CMD的模塊載入框架。
Node的出現，讓前端領域發生了巨大的改變，前端開發者終於可以自己開發工具了（如同猿人學會了製造工具，前端脫離了刀耕火種的年代）。隨著自動化工具glup、webpack的火熱，多種多樣的預編譯程式（如HTML模板引擎jade、Ejs等，CSS預處理器Sass、Less等），以及前端MVC、MVVM框架angular、react、vue等如雨後春筍般蜂擁出現。這讓前端開發進入一次全面封裝的時代，但究其本質，最後都是被編譯成瀏覽器識別的HTML/CSS/JS。
移動端的出現，在一定程度上，也對前端技術提出了更高的要求，H5頁面需要用最少的資源實現最大化的效果。
最後小程式的推出，進一步拓展了前端開發的應用領域，將應用程式存儲到雲端的嵌入式開發，或許是未來應用的新方向。
