前端架構（一）

接下來我會在不一樣階段去分析前端架構的一些細則和先後端交互的要點，逐一剖析

前端架構概念

web應用複雜度的增長，特別是單頁面應用的風靡。組件化，工程化，自動化成了前端發展的趨勢。或者說一線的互聯網公司就是這麼作的。一般說架構，指的是架構模式，自創的架構不多。瞭解架構模式，才能心有餘力的應對項目的發展。

前端工程的階段

第一階段： 庫/框架選型（解決開發效率）

Animate.css
jQuery
vue.js
underscore.js
React.js
Backbone.js
Bootstarp
zepto.js
jade
normalize.css
compass
Angular.js

第二階段： 簡單構建優化 總體渲染

選擇構建工具，對代碼進行壓縮，校驗，以後再以頁面爲單位進行簡單的資源合併。 全部頁面代碼放到了一個html文檔中，適合我的實驗室項目。 新建一個文件，快速的驗證某個功能或者開發某個組件，再移植到開發環境中。
優勢：開發速度快，執行過程清晰
不足：不容易分工合做

第三階段： 結構行爲表現分離，JS/CSS模塊化開發

結構：HTML
行爲：JavaScript
表現：CSS
解決維護效率 js的模塊化方案 ADM/CDM/UMD/ES6 Module
css的模塊化：less，sass。

第四階段： 插件

對需求的響應快，更快的實現頁面的UI樣式，前端更快捷的實現頁面佈局，使前端把重點放在業務邏輯上

第五階段：模塊

主要如下幾種模塊規範
（1）AMD規範（用戶客戶端，RequireJS實現）
（2）CommonJS規範（用於服務端，Browserify實現）
（3）EcmaScript 6 Module

js

如今ES6已經在語言層面上規定了模塊系統，徹底能夠取代現有的CommonJS和AMD規範，並且使用起來至關簡潔，而且有靜態加載的特性。

1.用++Webpack + Babel++將全部模塊打包成一個文件同步加載，也能夠搭乘多個chunk異步加載；
2.用++System+Babel++主要是分模塊異步加載；
3.用瀏覽器的< script type="module">加載。

css

雖然SASS、LESS、Stylus等預處理器實現了CSS的文件拆分，但沒有解決CSS模塊化的一個重要問題：選擇器的全局污染問題。

按道理，一個模塊化的文件應該要隱藏內部做用域，只暴露少許接口給使用者。而按照目前預處理器的方式，導入一個CSS模塊後，已存在的樣式有被覆蓋的風險。雖然重寫樣式是CSS的一個優點，但這並不利於多人協做

資源的模塊化

Webpack的強大之處不只僅在於它統一了JS的各類模塊系統，取代了Browserify、RequireJS、SeaJS的工做。更重要的是它的萬能模塊加載理念，即全部的資源均可以且也應該模塊化。

資源模塊化後，優勢是：

依賴關係單一化。全部CSS和圖片等資源的依賴關係統一走JS路線，無需額外處理CSS預處理器的依賴關係，也不需處理代碼遷移時的圖片合併、字體圖片等路徑問題； 資源處理集成化。如今能夠用loader對各類資源作各類事情，好比複雜的vue-loader等等； 項目結構清晰化。使用Webpack後，你的項目結構總能夠表示成這樣的函數： dest = webpack(src, config)。

第六階段：前端工程化

前端工程化項目分爲3大模塊

1. Node服務，提供數據代理，路由，和服務器渲染，經過restful api和後端通訊。
2. web應用開發，專一於web交互體驗。
3. 前端運維：包含構建，測試，部署及監控等。

靜態資源與Node端銜接：

• 前端靜態資源構建工做與Node服務相互分離，Node服務在開啓的過程當中會讀取前端構建生成的靜態資源映射表。
• 靜態資源映射表的生成：
• 預編譯：ES6語法轉義，css預編譯器處理，源碼質量審查，測試
• 模塊依賴解析
• 壓縮，靜態資源版本號

第七階段：組件化

組件組件並非一個新興的概念， 可是React.js強制組件化，因此看來才那麼新穎。它把JavaScript，CSS，HTML從新打包。 從UI拆分下來的每一個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，咱們稱之爲組件。
單一職責原則：一個類應該只有一個發生變化的緣由。
組合/彙集複用原則：儘可能使用合成/聚合，而不是使用繼承。

鼓勵遵循下面幾條「約定」：

• Ajax請求從Node端代理，而非具體後端服務。
• 鼓勵將JavaScript、CSS、HTML視爲前端領域的「彙編」。
• 重視前端頁面狀態管理，推薦的方案有Redux、vuex及MobX等。
• 強調組件化，面向組件集開發。
• 項目的腳手架，來搭建項目的開發環境。