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層

(1).圖片可以按頁面和公共模塊來分著存放。
(2).一個頁面獨有的圖片用一個文件夾存放，方便壓縮和合成雪碧圖。
(3).公用的圖片元素或者出現多次的圖片元素存放到public文件夾。
(4).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年前寫出來的設計方案，現在看起來并不先進，甚至有點落后。扔出來只是給大家提供一個思路，技術選型和打包發布，還得看你們的具體業務。方案說得有點籠統，還望諒解。

總結

以上是生活随笔為你收集整理的一套比较完整的前端技术选型，需要规整哪些东西，你知道不？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。