張志飛

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

關鍵詞：Grunt；Yeoman；Node server

中圖分類號：TP399 文獻標識碼：A 章編號：1009-3044（2016）25-0224-03

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

1 Grunt，javascript世界的構建工具

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

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

實現(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任務。Grunt sprite是一個將css代碼中的切片合成sprite圖的工具，其主要功能是，

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

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

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

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

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

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

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

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

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

核心實現(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思想，為復雜的web應用程序提供模型（models）、集合（collection）、視圖（views）的結構。其中模型用于綁定鍵值數(shù)據(jù)和自定義事件；集合富有可枚舉函數(shù)的豐富API；視圖可以聲明事件處理函數(shù)，并通過RESTful JSON接口接連到應用程序。

基礎組件類Node.js，采用inject jquery的方式，既保證了與jquery的兼容性，也能最大程度上提升我們的開發(fā)效率。其次，組件生命周期的控制，根據(jù)render，created，detached，removed不同時間點的狀態(tài)控制與事件響應。以及，基礎prop屬性，option，events的自定義配置。組件擁抱webcomponent的的新標準，模擬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ā)所面臨的諸多嚴重問題，例如零散的依賴關系。它的目標便是通過grunt與Bower（前端資源的包管理器）的包裝為開發(fā)者創(chuàng)建一個易用的工作流。

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

那么新建項目便可以通過，npm install -g generator-dbl，生成項目結構。

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

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

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

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

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

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

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

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

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

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

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

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

5 結束語

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

參考文獻：

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

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