轉-前端技術選型

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或圖片。