淺談前端項目發展的四個階段——庫/架構、建構優化、子產品化開發、元件化開發和資源管理

前端項目發展的四個階段：

1、庫/架構

庫：jQuery

架構：vue、React、Angularjs

2、建構優化

選擇Gulp, Grunt, Webpack 等建構工具，對代碼進行壓縮、校驗，再以頁面為機關進行簡單的資源合并。

3、JavaScript和CSS子產品化開發

分而治之是軟體工程中的重要思想，子產品化是目前前端最流行的分治手段。子產品化開發的最大價值不是複用，而應該是分治。

1) JavaScript子產品化開發：

JavaScript子產品化開發的方案有很多，包括：

①　AMD規範：用于用戶端，RequireJS實作；

②　CommonJS規範：用于服務端，Browserify實作；

③　ES6 Module：export和import實作。

2) CSS子產品化開發：

CSS子產品化開發是在LESS、SASS、Stylus等預處理器的@import導入、@mixin混入特性支援下實作的。

注意：子產品化中的子產品一般指JavaScript子產品。

4、元件化開發與資源管理

1) 元件化開發

元件化開發的最大價值在于複用。

①　頁面上的每個獨立的可視/可互動區域視為一個元件；

②　每個元件對應一個工程目錄，元件所需的各種資源都在這個目錄下就近維護；

③　由于元件具有獨立性，是以元件與元件之間可以自由組合；

④　頁面隻不過是元件的容器，負責組合元件形成功能完整的界面；

⑤　當不需要某個元件，或者想要替換元件時，可以整個目錄删除/替換。

前端項目的幾個開發概念：

概念	說明	執行個體
JS子產品	獨立的算法和資料單元	浏覽器環境檢測，網絡請求Ajax，應用配置，DOM操作，工具函數及元件裡的JS單元
CSS子產品	獨立的功能性樣式單元	栅格系統，字型圖示，動畫樣式及元件裡的CSS單元
UI元件	獨立的可視/可互動功能單元。一個元件一個目錄，資源就近維護；元件可組合；元件的JS可依賴其他JS子產品， 元件的CSS可依賴其他CSS單元	頁頭，頁尾，導航欄，搜尋框
頁面	UI元件的容器，由UI元件組成	首頁，清單頁，使用者管理
應用	整個項目或整個站點稱為應用，由多個頁面組成

前端項目的目錄結構示例：

元件與子產品的異同與聯系：

①　相同點：

都是基于功能劃分的機關。

②　不同點：

元件，偏向發行的概念，強調複用，作為可以被第三方客戶使用的獨立工具，元件一般都有獨立的封裝。

子產品，偏向設計的概念，強調分治，一般指JavaScript子產品，但也包括CSS子產品等，用于在項目中劃分相對獨立的功能，封裝時可以和其他子產品混合，發行時可以多個子產品合并後一起發行。

③　聯系：

元件與子產品沒有上下級的包含關系，子產品可以引用多個元件，元件也通常由多個子產品實作。也就是說，将頁面分成一個個元件，各元件互不幹擾，分别開發，可随意組合，元件包括HTML(<template>)、CSS(<style>)、JS代碼(<script>)，而它的script可以由多個子產品組成，JS子產品利用命名空間、閉包等方式将想要暴露的屬性暴露出來，或使用AMD、CMD、ES6 Module等方式，而CSS子產品利用LESS、SASS、Stylus等預處理器的@import導入、@mixin混入特性實作。

說到這裡，似乎聯想到了架構、架構、模式、子產品、元件、插件、控件、中間件等相關概念，它們的含義與差別請見：

2) 靜态資源管理

①　資源加載政策

無論通路哪個頁面都能按需加載頁面所需資源，沒通路過的無需加載，通路過的可以緩存複用。

②　增量加載（增量更新）

在需要更新資源的時候，不需要重新加載所有資源，隻需要加載變化的資源（新增的資源），然後合并到目前資源上。

③　前端優化

l 加載相關的政策：按需加載、延遲加載、預加載、請求合并；

l 緩存相關的方案：緩存利用，緩存更新、緩存共享、非覆寫式釋出。

前端高性能：CDN部署、緩存控制、檔案指紋、緩存複用、請求合并、按需加載、同步/異步加載、移動端首屏CSS内嵌、HTTP 2.0服務端資源推送。

④　靜态資源管理系統 = 一個通用的資源表生成工具 + 基于表的資源加載架構

l 資源表：一份資料檔案，如JSON，是項目中所有靜态資源（主要是JS和CSS）的建構資訊記錄，通過建構工具掃描項目源碼生成，是一種key-value結構的資料，以每個資源的id為key。

l 資源加載架構：提供一些資源引用的API，讓開發者根據id來引用資源，替代靜态的script/link标簽來收集、去重、按需加載資源。調用這些接口時，架構通過查表來查找資源的各項資訊，并遞歸查找其依賴的資源資訊，可以在此過程中實作各種性能優化算法來智能地加載資源。