前端工程化的研究與實(shí)踐

張志飛

摘要：隨著前后端分離方案與web前端組件化思想的廣泛傳播，不斷有新的技術(shù)方案涌出，在不同的業(yè)務(wù)場景下很大程度上提升了開發(fā)效率。該文提出的前端工程化的一種開發(fā)模式，適應(yīng)大部分的業(yè)務(wù)需求與場景，經(jīng)過了多個大中型項目的驗證，解決了傳統(tǒng)web開發(fā)模式帶來的各種問題。

關(guān)鍵詞：Grunt；Yeoman；Node server

中圖分類號：TP399 文獻(xiàn)標(biāo)識碼：A 章編號：1009-3044（2016）25-0224-03

所謂工程化，可以簡單地認(rèn)為是完成3項目標(biāo)，避免重復(fù)性的工作，預(yù)測一些常遇到問題，提前解決，避免影響后續(xù)開發(fā)；提高開發(fā)效率，使用自動化的工具方法，編寫可維護(hù)的項目代碼，自動化完成調(diào)試測試等；完成優(yōu)化工作，降低框架層面升級帶給業(yè)務(wù)的損耗，幫助業(yè)務(wù)團(tuán)隊在無感知情況下的優(yōu)化工作。本文結(jié)合多個項目實(shí)踐中的經(jīng)驗，總結(jié)一套前端開發(fā)工程化的方案，能夠有效的實(shí)現(xiàn)前端開發(fā)過程的自動化，提升工作效率。

1 Grunt，javascript世界的構(gòu)建工具

Grunt，構(gòu)建工具，實(shí)現(xiàn)了項目的自動化。對于需要反復(fù)重復(fù)的任務(wù)，例如壓縮，編譯，單元測試等，自動化工具能夠減輕你的勞動，簡化你的工作，當(dāng)你在gruntfile文件中，正確配置了任務(wù)，任務(wù)運(yùn)行器就會自動幫你或你的小組完成大部分無聊的工作。

Grunt less任務(wù)，less可以讓css變得更加簡單，更易于維護(hù)，它可以定義常量，可以轉(zhuǎn)換單位，還可以計算顏色，而且可以使用嵌套的方式把我們工重復(fù)的排列選擇器的漩渦中解脫出來。grunt-contrib-less配合grunt-contrib-watch插件，可以實(shí)現(xiàn)less的實(shí)時編譯功能。

實(shí)現(xiàn)：

grunt.initConfig（ {

pkg： grunt.file.readJSON（package.json），

watch： {

less： {

files： [src/less/**/*.less]，

taskes：[less]

}

}，

less：{

files： {

./src/css/*.css： ./src/less/*.less

}

}

}）

Grunt sprite，grunt svgsprite任務(wù)。Grunt sprite是一個將css代碼中的切片合成sprite圖的工具，其主要功能是，

1） 使用二叉樹排列算法，對css文件進(jìn)行處理，收集切片系列，生成sprite圖。

2） 在原css代碼的基礎(chǔ)上，精準(zhǔn)定位，添加background-position屬性。

3） 生成高清設(shè)備的高清sprite圖，并在文件末尾追加media query媒體查詢代碼。

4） 在引用sprite的位置打上時間戳

5） 在樣式末尾追加時間戳

實(shí)現(xiàn)方式，

sprite： {

public-icons： {

src： src/less/default/public/icons/**/*.png，

destImg： src/themes/default/common/images/public/icons.png，

destCSS： src/less/default/public/icons.less，

padding： 10，

cssFormat： less，

engine： phantomjs，

// More information can be found below

cssTemplate： spriteLessTemplate（icons.tmpl， {

baseClass： icon-public

}），

// OPTIONAL： Manual override for imgPath specified in CSS

imgPath： images/public/icons.png，

// OPTIONAL： Map variable of each sprite

cssVarMap： function （sprite） {

// `sprite` has `name`， `image` （full path）， `x`， `y`

// `width`， `height`， `total_width`， `total_height`

// EXAMPLE： Prefix all sprite names with sprite-

sprite.name = icon- + sprite.name；

}

}

通過icons-tmpl的配置，可以實(shí)現(xiàn)不同狀態(tài)的圖片，普通態(tài)，hover態(tài)下的sprite圖。當(dāng)然，如果是在不同的項目業(yè)務(wù)場景下，根據(jù)不同的站點(diǎn)風(fēng)格，可以設(shè)置不同的hover態(tài)rule，自定義grunt插件，專門處理hover態(tài)下的圖片顏色，例如default態(tài)下顏色為gray，hover態(tài)下為blue，借助ps的color處理方法，自動生成hover態(tài)圖片，保證全站風(fēng)格的統(tǒng)一。

2 組件式開發(fā)，seajs模塊按需加載

Seajs追求簡單、自然的代碼書寫和組織方式，簡單友好的模塊定義規(guī)范：Sea.js遵循CMD規(guī)范，可以像Node.js一般書寫模塊代碼；自然直觀的代碼組織方式：依賴的自動加載、配置的簡潔清晰。

根據(jù)業(yè)務(wù)需求，在Seajs的基礎(chǔ)上，編寫更適合業(yè)務(wù)場景的模塊加載器，按需加載，緩存處理，

核心實(shí)現(xiàn)，

function Module（url， deps） {

this.url = url；

this.dependencies = deps || []；

this.exports = null；

this.status = 0；

//depend on me

this._after = {}；

//wait for but unloaded

this._remain - 0；

}

Module.prototype.resolve = function（） {

var mod = this；

var ids = mod.dependencies；

var urils = []；

for（ var i = 0， len = ids.length； i < len； i++） {

...

}

}

Module.prototype.load = function（） {

for（var i = 0； i < len； i++） {

m = cachedMods[urils[i]]；

if（m.status < STATUS.FETCHING） {

m.fetch（requestCache）；

}else if（m.status === STATUS.SAVED） {

m.load（）；

}

}

}

自定義組件庫，采用常用的MVC思想，為復(fù)雜的web應(yīng)用程序提供模型（models）、集合（collection）、視圖（views）的結(jié)構(gòu)。其中模型用于綁定鍵值數(shù)據(jù)和自定義事件；集合富有可枚舉函數(shù)的豐富API；視圖可以聲明事件處理函數(shù)，并通過RESTful JSON接口接連到應(yīng)用程序。

基礎(chǔ)組件類Node.js，采用inject jquery的方式，既保證了與jquery的兼容性，也能最大程度上提升我們的開發(fā)效率。其次，組件生命周期的控制，根據(jù)render，created，detached，removed不同時間點(diǎn)的狀態(tài)控制與事件響應(yīng)。以及，基礎(chǔ)prop屬性，option，events的自定義配置。組件擁抱webcomponent的的新標(biāo)準(zhǔn)，模擬shadow dom，custom element的自定義新元素方式x-tag。

例如，文本輸入框text-input組件。

DBL.register（x-text-input， function（ require） {

var Node = require（x-node）；

var TextInput = Node.extend（ {

events： {

...

}，

render： function（） {

...

}，

created： function（） {

...

}，

placeholder： function（） {

...

}

}）；

return TextInput；

}）

3 Yeoman項目工程化自動工程

Yeoman不僅為新項目建立工作流，同時解決前端開發(fā)所面臨的諸多嚴(yán)重問題，例如零散的依賴關(guān)系。它的目標(biāo)便是通過grunt與Bower（前端資源的包管理器）的包裝為開發(fā)者創(chuàng)建一個易用的工作流。

利用Yeoman快速搭建骨架的特性，創(chuàng)建一個項目骨架生成器，既有利于同事之間的彼此協(xié)作，也有益于項目的擴(kuò)展。Yeoman簡單易用，可以很方便的創(chuàng)建生成器generator，例如創(chuàng)建成功后的項目骨架生成器為generator-dbl。

那么新建項目便可以通過，npm install -g generator-dbl，生成項目結(jié)構(gòu)。

4 頁面直出node方式，生成模擬數(shù)據(jù)mockjs，模板使用arttemplate

通過直出方式，降低首屏加載時間。從用戶在瀏覽器端輸入url到展示頁面的過程，這種模式簡單的分為以下部分。

1） Browser，客戶端輸入url地址，發(fā)出請求，指向靜態(tài)代理nginx

2） Nginx代理，判斷如果是靜態(tài)請求html模板，直接向模板服務(wù)器發(fā)出請求，如果不是，映射向php服務(wù)器發(fā)出請求。

3） Php服務(wù)器收到請求后，向server數(shù)據(jù)服務(wù)器請求，得到所需的數(shù)據(jù)后，將數(shù)據(jù)映射給專門處理模板的服務(wù)器。

4） 模板機(jī)收到數(shù)據(jù)后，使用arttemplate模板，渲染出完整的頁面，返回給php。

5） Php將完成的頁面返回到用戶瀏覽器。

通過這種直出的方式，不再需要請求到html文件后，單獨(dú)向server請求數(shù)據(jù)，減少了一次網(wǎng)絡(luò)請求。同時，不再強(qiáng)依賴js加載結(jié)束，才能渲染出頁面，大大降低了首屏加載時間，提升了用戶的體驗。

通過這種方式，前后端開發(fā)不再相互依賴。前端使用node server啟動local server即可，通過配置route路由，瀏覽器輸入url，node server接收到請求后，將cgi目錄下同一路徑的json作為響應(yīng)，通過arttemplate模板，渲染出完整的html，作為響應(yīng)，開發(fā)十分便捷。

Arttemplate性能卓越，執(zhí)行速度是Mustache和tmpl的20多倍，而且支持運(yùn)行時調(diào)試，可以精確定位異常模板所在的語句，支持include語句，所以采用了arttemplate模板。

前端對于cgi請求，每次手動編寫json數(shù)據(jù)，靜態(tài)模擬數(shù)據(jù)。通常情況下會遇到這些問題：某些邏輯復(fù)雜的代碼，加入和去除模擬數(shù)據(jù)時得小心翼翼；想要盡可能還原真實(shí)的數(shù)據(jù)（Php返回的數(shù)據(jù)），就要多次改動模擬數(shù)據(jù)；特殊的格式，例如IP，隨機(jī)數(shù)，圖片，地址等，需要去收集。通過引入mock.js，解決了這些問題，可以基于數(shù)據(jù)模板生成模擬數(shù)據(jù)，這樣就可以通過node讀取數(shù)據(jù)模板，mockjs生成模擬數(shù)據(jù)后，node寫json文件，輸出模擬數(shù)據(jù)，無需等待。

該模式下，前后端開發(fā)可以完全不再互相依賴，開發(fā)之前只要定義好接口，然后獨(dú)立開發(fā)，當(dāng)開發(fā)完成后，再在開發(fā)環(huán)境或者測試環(huán)境聯(lián)調(diào)即可。而且通過數(shù)據(jù)直出的方式，頁面在js加載出來之前就已經(jīng)顯示出來，增強(qiáng)了用戶體驗。

5 結(jié)束語

通過以上的一整套的技術(shù)實(shí)踐方案，從grunt，yeoman技術(shù)到頁面直出方案，以及通過多個項目的實(shí)踐結(jié)果表明，該方案的可行性與工程化。

參考文獻(xiàn)：

[1] Azat Mardan. Node.js項目實(shí)踐構(gòu)建可擴(kuò)展的Web應(yīng)用[M]. 北京： 電子工業(yè)出版社， 2015.

[2] 吳中驊， 雷宗民. Node.js實(shí)戰(zhàn) [M]. 北京： 電子工業(yè)出版社， 2015.