一套比較完整的前端技術選型，須要規整哪些東西，你知道不？

時間 2019-11-05

標籤一套比較完整前端技術選型須要規整哪些東西知道简体版

原文原文鏈接

1. 背景及現狀

隨着前端開發複雜度的日益增長，各類優秀的組件框架也遍地開花。同時，咱們面臨業務規模的快速發展和工程師團隊的不斷擴張，如何解決資源整合、模塊開發、項目部署、性能優化等問題勢在必行。javascript

2. 目標

根據背景和現狀的分析，咱們現制訂一個規範化的前端工做流，很好地規範統一項目的模塊化開發和前端資源，讓代碼的維護和互相協做更加容易更加方便，令前端開發自動化成爲一種習慣。同時，讓你們可以釋放生產力，提升開發效率，更好更快地完成團隊開發。css

3. 技術路線

SVN是一個開放源代碼的版本控制系統，相較於RCS、CVS，它採用了分支管理系統，它的設計目標就是取代CVS。互聯網上不少版本控制服務已從CVS遷移到Subversion。說得簡單一點SVN就是用於多我的共同開發同一個項目，共用資源的目的。html

GIT是一款免費、開源的分佈式版本控制系統，用於敏捷高效地處理任何或小或大的項目。它採用了分佈式版本庫的方式，沒必要服務器端軟件支持，使源代碼的發佈和交流極其方便。前端

GULP是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器。它不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用各類工具自動完成，大大提升咱們的工做效率。java

WEBPACK是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過 loader 的轉換，任何形式的資源均可以視做模塊。react

SASS是一種CSS預處理器。它是對CSS的語法的一種擴充，它可使用巢狀、混入、選擇子繼承等功能，能夠更有效有彈性的寫出Stylesheet。Sass最後仍是會編譯出合法的CSS讓瀏覽可使用，也就是說它自己的語法並不太容易讓瀏覽器識別（雖然它和CSS的語法很是的像，幾乎同樣），由於它不是標準的CSS格式，在它的語法內部可使用動態變量等，因此它更像一種極簡單的動態語言。webpack

RequireJS 是一個JavaScript模塊加載器。它很是適合在瀏覽器中使用，但它也能夠用在其餘腳本環境, 就像 Rhino and Node. 使用RequireJS加載模塊化腳本將提升代碼的加載速度和質量。css3

artTemplate是新一代javascript模板引擎，它採用預編譯方式讓性能有了質的飛躍，而且充分利用javascript引擎特性，使得其性能不管在前端仍是後端都有極其出色的表現。在chrome下渲染效率測試中分別是知名引擎Mustache與micro tmpl的2五、32倍。git

ReactJS是Facebook推出的一個用來構建用戶界面的JavaScript庫。設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。從最先的UI引擎變成了一整套先後端通吃的 Web App 解決方案。github

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頁面上。

使用規則：
一、少用圖片元素，儘可能用css3代替。
二、儘可能少用png24格式，要半透明的除外。
三、JPG適合攝影圖像或寫實圖像，同時也適合顏色較少圖像。
四、PNG8 適合所含顏色不多(少於256)、具備大塊顏色相近的區域或亮度差別十分明顯的較簡單的圖片。
五、PNG24適合圖片較爲複雜且有透明效果且透明效果沒法用css來實現的狀況。
六、若是頁面中有較多的小icon，首先考慮使用webfont,若是webfont不能知足需求，必須使用css sprite將圖片合併，來壓縮整體圖片的大小，同時減小頁面請求提升訪問速度。參考見webfont字庫
七、小於8k的圖片請轉化爲base64。

5.2.3. CSS層

css層經過sass來管理，這樣能更加靈活，方便和容易維護。具體規範參考css規範。
使用規則：
一、Include文件夾用來存放公共模塊，reset或者重用性很高的mixin等等全局公用的樣式。
二、Components文件夾用來存放組件級別的公用樣式，例如公用的按鈕樣式，icon樣式，彈窗的樣式等等。
三、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的使用

一、全局安裝

二、在項目根目錄下建立一個名爲 gulpfile.js 的文件

三、運行 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 或圖片。