1. 背景及現狀
随着前端開發複雜度的日益增加，各種優秀的元件架構也遍地開花。同時，我們面臨業務規模的快速發展和工程師團隊的不斷擴張，如何解決資源整合、子產品開發、項目部署、性能優化等問題勢在必行。
2. 目标
根據背景和現狀的分析，我們現制訂一個規範化的前端工作流，很好地規範統一項目的子產品化開發和前端資源，讓代碼的維護和互相協作更加容易更加友善，令前端開發自動化成為一種習慣。同時，讓大家能夠釋放生産力，提高開發效率，更好更快地完成團隊開發。
3. 技術路線
SVN是一個開放源代碼的版本控制系統，相較于
RCS
、
CVS
，它采用了分支管理系統，它的設計目标就是取代
CVS
。網際網路上很多版本控制服務已從
CVS
遷移到
Subversion
。說得簡單一點
SVN
就是用于多個人共同開發同一個項目，共用資源的目的。
GIT是一款免費、開源的分布式版本控制系統，用于靈活高效地處理任何或小或大的項目。它采用了分布式版本庫的方式，不必伺服器端軟體支援，使源代碼的釋出和交流極其友善。
GULP是前端開發過程中對代碼進行建構的工具，是自動化項目的建構利器。它不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用各種工具自動完成，大大提高我們的工作效率。
WEBPACK是當下最熱門的前端資源子產品化管理和打包工具。它可以将許多松散的子產品按照依賴和規則打包成符合生産環境部署的前端資源。還可以将按需加載的子產品進行代碼分隔，等到實際需要的時候再異步加載。通過
loader
的轉換，任何形式的資源都可以視作子產品。
SASS是一種
CSS
預處理器。它是對
CSS
的文法的一種擴充，它可以使用巢狀、混入、選擇子繼承等功能，可以更有效有彈性的寫出
Stylesheet
。
Sass
最後還是會編譯出合法的
CSS
讓浏覽可以使用，也就是說它本身的文法并不太容易讓浏覽器識别（雖然它和
CSS
的文法非常的像，幾乎一樣），因為它不是标準的
CSS
格式，在它的文法内部可以使用動态變量等，是以它更像一種極簡單的動态語言。
RequireJS 是一個
JavaScript
子產品加載器。它非常适合在浏覽器中使用，但它也可以用在其他腳本環境, 就像
Rhino and Node
. 使用
RequireJS
加載子產品化腳本将提高代碼的加載速度和品質。
artTemplate是新一代
javascript
模闆引擎，它采用預編譯方式讓性能有了質的飛躍，并且充分利用
javascript
引擎特性，使得其性能無論在前端還是後端都有極其出色的表現。在
chrome
下渲染效率測試中分别是知名引擎
Mustache
與
micro tmpl
的25、32倍。
ReactJS是
Facebook
推出的一個用來建構使用者界面的
JavaScript
庫。設計思想極其獨特，屬于革命性創新，性能出衆，代碼邏輯卻非常簡單。從最早的UI引擎變成了一整套前後端通吃的
Web App
解決方案。
VueJS是開源的一個前端開發庫,通過簡潔
API
提供高效的資料綁定和靈活的元件系統。
4. 業内标準
W3C标準
5. 總體設計
5.1 工作流總體架構
5.2. 詳細設計圖
5.2.1. 代碼管理層
SVN：屬于集中化的版本控制系統，使用起來有點像是檔案倉庫的感覺，支援并行讀寫檔案，支援代碼的版本化管理，功能包括取出、導入、更新、分支、改名、還原、合并等等。使用比較簡單，這裡不再贅述。
GIT：是分布式的版本控制系統。它采用了分布式版本庫的方式，不必伺服器端軟體支援。操作指令包括：clone，pull，push,branch ,merge ,push,rebase等等，具體使用我也不贅述。
SVN和GIT的使用：SVN适用于項目管理。因為它簡單易用。當代碼涉及多組成員或者代碼有一定的秘密性，用svn管理都是省事放心。
Git适用于代碼管理。對于組内的一些公用元件，或者sdk之類的代碼，用git更好管理，更新更快。
5.2.2. Images層
- 圖檔可以按頁面和公共子產品來分着存放。
- 一個頁面獨有的圖檔用一個檔案夾存放，友善壓縮和合成雪碧圖。
- 公用的圖檔元素或者出現多次的圖檔元素存放到public檔案夾。
- pic檔案夾用于存放靜态頁面時的demo圖檔，上正式環境的時候，這個檔案裡的東西可以清除。
格式使用：
GIF
GIF是一種正在逐漸被抛棄的圖檔格式。PNG格式的出現就是為了替代它。PNG 8除了不支援動畫外，PNG8有GIF所有的特點，但是比GIF更加具有優勢的是它支援alpha透明和更優的壓縮（GIF僅支援索引透明）。
但是，當圖檔顔色簡單到一定程度，大小小到一定程度的時候，gif格式圖檔大小要小于png8。
JPG
支援攝影圖像或寫實圖像的進階壓縮，并且可利用壓縮比例控制圖像檔案大小。
有損壓縮會使圖像資料品質下降，并且在編輯和重新儲存JPG格式圖像時，這種下降損失會累積。
JPG和PNG8都适合顔色較少的圖檔，因為JPG在栅格化時精确記錄少數點，其它點用內插補點補齊。但是當圖像顔色數少于一定值比如256的時候，PNG8可能更合适。
JPG不适合具有大塊顔色相近的區域或亮度(“銳度”)差異十分明顯的較簡單的圖檔。
JPG在存儲攝影或寫實圖像一般能達到最佳的壓縮效果，比如網站的背景圖，輪播圖，使用者頭像等等。
PNG
PNG可以細分為三種格式:PNG8，PNG24，PNG32。
後面的數字代表這種PNG格式最多可以索引和存儲的顔色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。
能在保證最不失真的情況下盡可能壓縮圖像檔案的大小。
PNG用來存儲灰階圖像時，灰階圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，并且還可存儲多到16位的α通道資料。
對于需要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖檔檔案較大，不适合應用在Web頁面上。
使用規則：
1. 少用圖檔元素，盡量用css3代替。
2. 盡量少用png24格式，要半透明的除外。
3. JPG适合攝影圖像或寫實圖像，同時也适合顔色較少圖像。
4. PNG8 适合所含顔色很少(少于256)、具有大塊顔色相近的區域或亮度差異十分明顯的較簡單的圖檔。
5. PNG24适合圖檔較為複雜且有透明效果且透明效果無法用css來實作的情況。
6. 如果頁面中有較多的小icon，首先考慮使用webfont,如果webfont不能滿足需求，必須使用css sprite将圖檔合并，來壓縮總體圖檔的大小，同時減少頁面請求提高通路速度。參考見webfont字庫
7. 小于8k的圖檔請轉化為base64。
5.2.3. CSS層
css層通過sass來管理，這樣能更加靈活，友善和容易維護。具體規範參考css規範。
使用規則：
1. Include檔案夾用來存放公共子產品，reset或者重用性很高的mixin等等全局公用的樣式。
2. Components檔案夾用來存放元件級别的公用樣式，例如公用的按鈕樣式，icon樣式，彈窗的樣式等等。
3. css命名最好就語義化。
5.2.4. HTML層
HTML層主要就是版本号的控制，這個放在下面GULP的使用時介紹。html的規範參考HTML規範。
5.2.5. JS層
js規範點選這裡
5.2.5.1. JS子產品化标準–RequireJS
通過使用大家熟悉的
AMD
規範，能統一大家的js标準。子產品化的開發更友善代碼的共享和按需加載，提高開發的效率。借助
RequireJS
可以實作
js
檔案的異步加載，管理子產品之間的依賴性，便于代碼的編寫和維護。
RequireJS使用原則：
新項目可以采取這個模闆為基礎去擴充代碼。都在同一個區域定義變量，都在同一個區域定義事件，都在同一個地方綁定事件，最後初始化和暴露方法。套用代碼标準模闆可以做到大家的代碼風格類似，以後接手的同學一看就知道代碼在哪裡，快速上手。
5.2.5.2. JS模闆引擎–artTemplate
artTemplate這個模闆引擎相對成熟，性能比較好。支援運作時調試，可精确定位異常模闆所在語句，模闆語句簡潔，浏覽器支援完整。
artTemplate的使用規則：
按照它的api來使用即可。
5.2.5.3. MVVM和類MVC架構
5.2.5.3.1. ReactJS
ReactJS是一個用來建構使用者界面的 JavaScript 庫，虛拟DOM的使用讓它的性能優越。同時，它實作了單向響應的資料流，進而減少了重複代碼，這也是它為什麼比傳統資料綁定更簡單的原因。
鑒于ReactJS對IE的支援不足，是以比較适合使用到移動端的項目中去。
接下來介紹ReactJS的基本使用。
5.2.5.3.1.1. HTML模闆
5.2.5.3.1.2. ReactDOM.render()
ReactDOM.render 是 React 的最基本方法，用于将模闆轉為 HTML 語言，并插入指定的 DOM 節點。
5.2.5.3.1.3. JSX 文法
JSX的文法就是直接寫在 JavaScript 語言之中，不加任何引号。它允許 HTML 與 JavaScript 的混寫，簡單友善。
5.2.5.3.1.4. 封裝元件
React 允許将代碼封裝成元件，然後像插入普通 HTML 标簽一樣，在網頁中插入這個元件。React.createClass 方法就用于生成一個元件類的。
5.2.5.3.1.5. PropTypes 屬性
PropTypes屬性，是用來驗證元件執行個體的屬性是否符合要求的一個利器。
Mytitle元件有一個title屬性。PropTypes 告訴 React，這個 title 屬性是必須的，而且它的值必須是字元串。如果執行個體化過程中，title不是字元串就會驗證不通過，出現背景報錯的資訊。
5.2.5.3.1.6. this.state
React 的一大創新，就是将元件看成是一個狀态機，一開始有一個初始狀态，然後使用者互動，導緻狀态變化，進而觸發重新渲染UI 。state就是狀态的存取對象。
截圖的例子中，getInitialState 方法用于定義初始狀态，這個對象可以通過 this.state 屬性讀取。當使用者點選元件，導緻狀态變化，this.setState 方法就修改狀态值，每次修改以後，自動調用 this.render 方法，再次渲染元件。
5.2.5.3.2. VueJS
VueJs是一個短小精悍容易上手的MVVM架構。Api清晰，使用容易。支援ie8以上等其他主流的浏覽器。适合在移動端和浏覽器要求偏弱的項目。
VueJs的基本使用：
5.2.5.3.2.1. 資料綁定
5.2.5.3.2.2. 雙向綁定
5.2.5.3.2.3. 渲染清單
5.2.6. 自動化建構工具
5.2.6.1. GULP
GULP簡單易用，是前端自動化項目的建構利器。能把很多繁瑣重複的工作簡單化，指令化。作為前端工作流的利器，是一個不錯的選擇。加上豐富的元件，讓它能幹更多自動化的事情。
5.2.6.1.1. GULP的使用
1、全局安裝
2、在項目根目錄下建立一個名為 gulpfile.js 的檔案
3、運作 gulp
具體的文法請參考官網。
5.2.6.1.2. GULP的插件使用
5.2.6.1.2.1. 合并css– gulp-concat-css
5.2.6.1.2.2. 合并js– gulp-concat
5.2.6.1.2.3. 壓縮混淆js–gulp-uglify
5.2.6.1.2.4. 壓縮css– gulp-minify-css/gulp-clean-css
5.2.6.1.2.5. 監聽檔案的更新– gulp-livereload
這個例子是監聽樣式的更新。
5.2.6.1.2.6. 圖檔壓縮– gulp-imagemin
5.2.6.1.2.7. 生成雪碧圖– gulp.spritesmith
Sprite.css是雪碧圖生成的css。
5.2.6.1.2.8. 版本号的控制– gulp-rev-append
gulp-rev-append 插件會通過正則(?:href|src)=”(.)[?]rev=(.)[“]查找并給指定連結填加版本号，預設根據檔案MD5生成，是以檔案未發生改變，這個版本号将不會改變。
運作後的結果：
5.2.6.1.2.9. 編譯sass– gulp-sass
還有其他很多插件不再一一介紹。
5.2.6.2. Webpack
webpack是目前用得最多的一款子產品加載器兼打包工具。
webpack是以
commonJS
的形式來書寫腳本滴，但對
AMD/CMD
的支援也很全面，友善舊項目進行代碼遷移。
開發便捷，能替代部分
grunt/gulp
的工作，比如打包、壓縮混淆、圖檔轉
base64
等。
擴充性強，插件機制完善，特别是支援 React 熱插拔的功能讓人眼前一亮。
下面簡單介紹Webpack的基本使用。
5.2.6.2.1. 全局安裝
5.2.6.2.2. 簡單使用
運作：
這樣就會編譯entry.js并打包到bundle.js。
5.2.6.2.3. Loader
Webpack
本身隻能處理
JavaScript
子產品，如果要處理其他類型的檔案，就需要使用
loader
進行轉換。
Loader
可以了解為是子產品和資源的轉換器，它本身是一個函數，接受源檔案作為參數，傳回轉換的結果。這樣，我們就可以通過
require
來加載任何類型的子產品或檔案，比如
CoffeeScript
、
JSX
、
SASS
或圖檔。
module.loaders
告知
webpack
每一種檔案都需要使用什麼加載器來處理。
5.2.6.2.4. GULP和Webpack的混合使用
在gulp裡面，隻需把配置寫到
webpack({ ... })
中去即可，不用再寫
webpack.config.js
。
5.2.6.2.5. 在ReactJS裡面使用Webpack
在
ReactJS
裡面安裝
react-hot-loader
，再結合Webpack就可以實作修改即更新同步的效果。
6. 技術亮點
6.1. 統一标準，提高工作效率，有利團隊合作
借鑒業内出名的諸如
RequireJS
、
SASS
等架構，統一前端代碼的規範，有利于以後的團隊合作，使用
GULP
、
Webpack
等高效的建構工具，能提高工作的效率，減少工作量。更有利于代碼的維護和可擴充性。
6.2. 跨平台，支援靈活多變的場景
子產品化的設計和可擴充的代碼模式，加上靈活的自動化建構工具，适合各種場景的開發。也便于新成員的接入。
總結：這個其實是我2年前寫出來的設計方案，現在看起來并不先進，甚至有點落後。扔出來隻是給大家提供一個思路，技術選型和打包釋出，還得看你們的具體業務。方案說得有點籠統，還望諒解。
作者：Alone381
連結：https://juejin.im/post/5b28d4fbe51d45587b47fd43
來源：掘金