前端技術的發展與演變

近年來，前端技術的發展迅速，但由於前端知識面龐大，在實際學習當中每每沒法理清其中的脈絡。下面從各類庫、框架、插件的層面上，對前端知識點作一些簡單的梳理。從軟件工程上，將前端分爲四個由淺及深的層面或階段。

 

1、基礎層（瀏覽器原生支持html/css/js）

• HTML超文本標記語言，用標籤構建網頁的內容。HTML5擴展了標籤及其功能。
• CSS層疊樣式表，控制頁面內容的表現。CSS3增長了更多的特效，好比文本效果和2D/3D轉換，以及動畫。
• JavaScript的原生API（包括DOM、BOM、Style樣式、Canvas、SVG、WebGL等）

有了這些之後，咱們已經能夠開發基本的網絡應用了，可是會發現它們並很差用，或者說存在一些缺陷，有優化的餘地。

• 當先後端分離後，經過API獲取到的數據，須要填充到頁面中，原生DOM操做很是消耗性能，且傳統JS使用字符串拼接的方式不太好用
• CSS不能像其餘程序語言同樣，經過變量、計算、繼承等方式很好的管理。
• JS原生API很差用，還存在瀏覽器兼容等問題。

　　這些問題，前端開發者經過多年的填坑，花費巨大的精力封裝了各類框架層，用來減小開發工做量。

 

2、框架層（各種前端庫）

JQuery、YUI、Zepto、以及針對H5中canvas的遊戲庫Lufylegend等等，主要爲了解決瀏覽器原生API很差用和兼容問題，即對原型API作了二次封裝，使其更易於開發和掌握，本質上等於依靠框架層間接操做原生瀏覽器的基礎API。在此基礎上，又針對一些經常使用的頁面組件，擴展了爲插件，即組件或插件層。

 

3、組件層（或插件）

經常使用的如：日曆選擇器、富文本編輯器、圖片輪播等等。這些僅僅是對WEB應用中，比較經常使用或通用的部分進行了再次封裝。除此以外，那些平臺特有的業務邏輯屬於應用層。

 

4、應用層（業務層）

如購物車，權限管理等等，應用層的業務邏輯一般隨WEB應用的場景有關。

 

　　如上只是傳統的開發模式，隨着先後端的分離，前端開發分擔了愈來愈多業務邏輯。經過HTTPrequest與後臺交互數據，而後經過拼接字符串的方式，生成瀏覽器識別的DOM結構與樣式。這些都讓前端開發愈來愈重，但js自己不能很好的實現模塊化管理，因此出現了require、sea等AMD和CMD的模塊加載框架。

 

前端的革命

Node的出現，讓前端領域發生了巨大的改變，前端開發者終於能夠本身開發工具了（如同猿人學會了製造工具，前端脫離了刀耕火種的年代）。隨着自動化工具glup、webpack的火熱，多種多樣的預編譯程序（如HTML模板引擎jade、Ejs等，CSS預處理器Sass、Less等），以及前端MVC、MVVM框架angular、react、vue等如雨後春筍般蜂擁出現，前端開發進入一次全面封裝的時代，組件化開發模式在必定程度上，利用JS的可編程性管理html和css，最後經過編譯，再生成瀏覽器識別的HTML/CSS/JS。

　　

　　移動端的出現，在必定程度上，也對前端技術提出了更高的要求，基於移動端的網絡環境，須要用更少的資源實現最大化的效果。

　　

　　最後小程序的推出，進一步拓展了前端開發的應用領域，將應用程序存儲到雲端的嵌入式開發，或許是將來應用的新方向。