摘 要：高性能前端架構(gòu)技術(shù)逐漸成為Web復(fù)雜產(chǎn)品開發(fā)的應(yīng)用趨勢，然而針對目前流行的Node.js平臺下的高性能前端架構(gòu)技術(shù)目前還未形成具體的技術(shù)規(guī)范。本文從介紹Node.js平臺，重點研究了前端MVC模式開發(fā)、模塊化開發(fā)、自動化構(gòu)建管理、自定義廣播機制的關(guān)鍵技術(shù)。最后，通過點點手機助手應(yīng)用產(chǎn)品的開發(fā)實踐，驗證了Node.js平臺下前端架構(gòu)技術(shù)的可行性。

關(guān)鍵詞：Node.js；Web前端；前端架構(gòu)；點點手機助手

1 引言

到目前為止，Web前端正處于發(fā)展的高峰期。在Web應(yīng)用程序的用戶體驗越來越被重視的今天，Web前端開發(fā)的地位也上升到了前所未有的高度，更多的挑戰(zhàn)也隨之而來。為了將前端開發(fā)者繁重的工作變得更加簡單，架構(gòu)也應(yīng)運而生。

總體上看Web前端的發(fā)展已經(jīng)進入了高速發(fā)展時期，前端開發(fā)已經(jīng)越來越工程化，前端架構(gòu)的概念只是開始流行起來，為了更好的解決Web前端所面臨的工程性問題，在Node.js平臺下的前端架構(gòu)更是少之極少，因此針對解決前端日益工程化問題，以此作為本文研究出發(fā)點。

2 Web前端架構(gòu)關(guān)鍵技術(shù)

2.1 模塊化開發(fā)

Sea.js是一個成熟的開源項目，核心目標就是為我們前端開發(fā)者提供簡單、極致的模塊化開發(fā)體驗。在使用Sea.js，進行書寫的時候，我們要嚴格遵守CMD（Common Module Definition）模塊定義規(guī)范。

通過exports，就可以向外提供接口。我們可以通過reqiure（‘./util.js’）就可以拿到util.js中通過exports暴漏的接口。這樣我們的前端開發(fā)就能像后端開發(fā)工程師一樣。使得JavaScript語言也擁有Java、Ptyhon、C#等語言所擁有的include、import等功能。有效的解決我們實際開發(fā)項目中命名沖突和繁瑣的文件依賴問題。

2.2 MVC開發(fā)模式

MVC（Model-View-Controller）是目前廣泛流行的軟件設(shè)計模式[1]?，F(xiàn)在我們通過Backbone.js框架實現(xiàn)前端JS架構(gòu)的MVC模式。

一個Model通常包含應(yīng)用程序的狀態(tài)state，起到管理和接受狀態(tài)/數(shù)據(jù)發(fā)生changes的一系列基本功能。并且，我們可以通過Model可以協(xié)調(diào)這些state/data組成內(nèi)容，并且持續(xù)的把它們傳送到服務(wù)器，達到數(shù)據(jù)同步的功能。

我們通過組合同一類的Model來實現(xiàn)Collection。這樣我們處理的Collection包含多個模型Model，根據(jù)Backbone為Collection提供的特定功能。

我們可以通過View來實現(xiàn)呈現(xiàn)模型和集合中state/data交互UI的邏輯關(guān)系。通過View允許state/data脫離DOM，使得多樣的View能使用相同的模型和集合。模型與控制器和視圖相互分離，極大地降低了耦合性。

2.3 自定義廣播機制

模塊化開發(fā)，往往最大的問題就是解耦。本文采用的是廣播機制來實現(xiàn)模塊之間的通信。也就是模塊之間通過發(fā)送廣播的方式和接受廣播事件的方式來實現(xiàn)通信，事件發(fā)起者只需要派發(fā)事件，而不必關(guān)心事件是否被接受（訂閱）。通過應(yīng)用觀察者模式使得模塊之間劃分了一個清晰的界限，大大提高應(yīng)用程序的可維護性和重用性。

由于對象（Object）是組成JavaScript的基本組成單元，實際上，JavaScript中的一切都是對象[2]，在JavaScript中無論數(shù)據(jù)和代碼多么復(fù)雜，我們都可以將其組織成Object形式的對象[3]，所以這里具體實現(xiàn)的方案是我們通過對象的形式，來存放被觀察對象（Subject）。隊列實現(xiàn)了先進先出（first-in，first-out，縮寫FIFO）的策略[4]，所以使用隊列的形式存放監(jiān)聽了被觀察對象（Subject）的觀察者。

2.4 自動化構(gòu)建管理

為了讓程序員更加專注于編碼，大大提高前端開發(fā)人員的工作效率，前端架構(gòu)設(shè)計通過Grunt工具可以實現(xiàn)自動化構(gòu)建管理。Grunt工具設(shè)計的兩個關(guān)鍵文件是package.json和grunt.js。package.json該文件用來為npm（Node Package Manager）存放項目配置的員數(shù)據(jù)，與grunt關(guān)系最大的配置在于devDependencies中。

上面的配置就展示了，我們項目中需要的依賴工具，也就是通過npm管理的相關(guān)工具包。進行上面的package.json配置后，我們通過命令行進入項目所在目錄，鍵入npm install，npm就會根據(jù)devDependencies中的配置，將需要的工具包以及插件下載到你的項目目錄中。

現(xiàn)在有了項目中有了工具包了，我們該如何有效地使用工具包來為我們實現(xiàn)自動化工作流程。實現(xiàn)的關(guān)鍵就在于另一個配置文件Grunt.js文件的配置。通用Gruntfile.js寫法如下：

Grunt配置的主體都在grunt.initConfig中，其中我們看到pkg：grunt.file.readJSON（‘package.json’）是為了以后再其他任務(wù)（task）中方便讀取package.json已經(jīng)定義好的值。下面我們來看看如何配置任務(wù)（task）：Grunt配置的主題都在grunt.initConfig中，其中我們看到

transport就是一個任務(wù)（task），她是這次spm2所提供的一系列g(shù)runt構(gòu)建插件的其中一個，該插件主要是負責提取模塊中的依賴，并為每個模塊設(shè)置模塊ID。dialog是任務(wù)的其中一個目標，files中定義了要對哪些文件執(zhí)行該任務(wù)，以后的執(zhí)行任務(wù)后，對于生成的文件應(yīng)該放在什么地方（dest）。接下來，我們需要加載grunt需要的插件：

最后我們配置命令來執(zhí)行我們上面配置好的任務(wù)。

3 點點手機助手前端架構(gòu)介紹

點點手機助手是一個手機管理的桌面軟件，運行于Windows平臺。該款軟件采用了Chromium Embedded Framework（CEF）+Web的方式開發(fā)。點點手機助手的前端架構(gòu)環(huán)境就是按照本文研究的架構(gòu)環(huán)境進行搭建和開發(fā)。

整體前端的設(shè)計原則是一致性、復(fù)用性、可擴展性。所有的設(shè)計需要滿足這三個條件。因為整個項目都是Simple Page，采用Backbone.js實現(xiàn)MVC模式開發(fā)，實現(xiàn)業(yè)務(wù)和邏輯分離效果。采用了Sea.js實現(xiàn)模塊化開發(fā)。模塊化開發(fā)雖然能解決命名沖突、文件依賴、文件管理的問題，但是出現(xiàn)了耦合度高的難點，各個模塊之間必須完成解耦，不能相互調(diào)用形成依賴，所以采用觀察者模式設(shè)計廣播機制來通過廣播消息來出傳遞指令。

4 結(jié)論

本文在詳細分析高性能前端架構(gòu)的具體研究，對于前端架構(gòu)的模塊化開發(fā)、自動化構(gòu)建管理實現(xiàn)、前端MVC模式的實現(xiàn)、廣播機制實現(xiàn)做了具體分析。后面為了更好地驗證本文研究的重要意義，以點點手機助手前端的具體實現(xiàn)為實例做了實踐證明。本文設(shè)計的前端架構(gòu)也需要不斷的借鑒國內(nèi)外先進的應(yīng)用手段，在遵循Web標準化，達到兼容更多、更新瀏覽器，實現(xiàn)更好地提升用戶體驗效果，前端性能更進一步得到提升的目標，我們還需要不斷努力。

[參考文獻]

[1]Mike Cantelon，TJ Holowaychuk.Node.js in Action.Manning.2013.7（49）.

[2]JohnResig.精通JavaScript.人民郵電出版社.2008.4（16）.

[3]李戰(zhàn).悟透JavaScript.北京：電子工業(yè)出版社.2008.12（13）.

[4]Thomas H.Cormen，Charles E.Leiserson，Ronald L.Rivest， Clifford Stein.Introduction to Algorithms（Second Edition）.機械工業(yè)出版社2006，9（200）.