Node.JS平臺下Web前端架構的研究

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

關鍵詞：Node.js；Web前端；前端架構；點點手機助手

1 引言

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

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

2 Web前端架構關鍵技術

2.1 模塊化開發

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

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

2.2 MVC開發模式

MVC（Model-View-Controller）是目前廣泛流行的軟件設計模式[1]。現在我們通過Backbone.js框架實現前端JS架構的MVC模式。

一個Model通常包含應用程序的狀態state，起到管理和接受狀態/數據發生changes的一系列基本功能。并且，我們可以通過Model可以協調這些state/data組成內容，并且持續的把它們傳送到服務器，達到數據同步的功能。

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

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

2.3 自定義廣播機制

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

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

2.4 自動化構建管理

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

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

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

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

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

最后我們配置命令來執行我們上面配置好的任務。

3 點點手機助手前端架構介紹

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

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

4 結論

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

[參考文獻]

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

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

[3]李戰.悟透JavaScript.北京：電子工業出版社.2008.12（13）.

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