代慶梅

摘要：為實(shí)現(xiàn)Web開發(fā)中客戶端代碼的可讀性、易測(cè)試、可維護(hù)性和可擴(kuò)展性，介紹和分析JavaScript MVC框架的基本結(jié)構(gòu)和設(shè)計(jì)模式。以Backbone.js框架為例，通過實(shí)際應(yīng)用開發(fā)中的部分代碼演示了JavaScript MVC框架在Web開發(fā)中的應(yīng)用，并闡述了Web開發(fā)中的其他注意事項(xiàng)。

關(guān)鍵詞：JavaScript MVC框架；DOM；Backbone.js

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2014）10-2242-04

Abstract： The basic structure and design pattern of JavaScript MVC framework are introduced and analyzed to achieve the client code readability， testability， maintainability and scalability in Web development. Taking the Backbone.js framework as examples， the codes of JavaScript MVC framework in Web Development are demonstrated and other precautions are elaborated in practical application.

Key words： JavaScript MVC Framework； DOM； Backbone.js

1 問題的提出

在傳統(tǒng)的B/S軟件開發(fā)中，服務(wù)器端進(jìn)行業(yè)務(wù)邏輯和數(shù)據(jù)處理，客戶端進(jìn)行HTML頁面顯示，其中客戶端JavaScript主要用于改善用戶體驗(yàn)。而隨著Ajax、JQuery及相關(guān)插件的推廣，部分業(yè)務(wù)邏輯就無可避免地會(huì)在客戶端實(shí)現(xiàn)?？蛻舳说腏avaScript文件很容易從幾句變成幾千行代碼，開發(fā)人員也會(huì)陷入一系列的DOM操作和嵌套的JQuery回調(diào)函數(shù)中。開發(fā)的復(fù)雜性也日益明顯，常常會(huì)出現(xiàn)一個(gè)人無法看懂另外一人開發(fā)的JavaScript代碼的情況，很難做到客戶端代碼的可讀性、易測(cè)試、可維護(hù)性和可擴(kuò)展性。

2 MVC框架

MVC是模型（model）-視圖（view）-控制器（controller）的縮寫，是傳統(tǒng)Web應(yīng)用開發(fā)中服務(wù)器端廣泛使用的軟件開發(fā)模式，它用一種業(yè)務(wù)邏輯和數(shù)據(jù)顯示分離的方法來組織代碼，具有耦合性低、重用性高、可維護(hù)性高、有利于軟件工程化管理的特點(diǎn)。最典型的MVC是JSP + servlet + javabean的模式。

1）模型（model）主要包括業(yè)務(wù)邏輯模塊（web項(xiàng)目中的Action，dao類）和數(shù)據(jù)模塊（pojo類）。模型與數(shù)據(jù)格式無關(guān)，這樣一個(gè)模型能為多個(gè)視圖提供數(shù)據(jù)。

2）視圖（view）是用戶與之交互的界面，在web中視圖一般由jsp，html組成。

3）控制器（controller）接收來自界面的請(qǐng)求并交給模型進(jìn)行處理。

典型的HTTP請(qǐng)求/響應(yīng)過程MVC流程如下：

3 JavaScript MVC框架

當(dāng)前Web應(yīng)用程序在客戶端有越來越多的邏輯判斷和數(shù)據(jù)處理，尤其是客戶端包括地理信息、本地化存儲(chǔ)、websocket等功能時(shí)，客戶端代碼極難維護(hù)。為了解決這一問題，現(xiàn)在已有多個(gè)JavaScript MVC框架（Backbone.js、 Ember.js、 AngularJS、Knockout等）將傳統(tǒng)的MVC框架引入到前端開發(fā)中。

JavaScript MVC框架中M代表數(shù)據(jù)，V代表DOM，C協(xié)調(diào)輸入輸出并操作數(shù)據(jù)，MVC框架就是將數(shù)據(jù)與DOM進(jìn)行分離，它并不僅僅只是一種，還有多種擴(kuò)展模式，表示為MV*（星號(hào)代表有不同選擇），例如：MVP（Model-View-Presenter）、MVVM（Model-View-ViewModel）。

JavaScript MVC與傳統(tǒng)的服務(wù)器端MVC有所不同，它主要是將數(shù)據(jù)和界面顯示分開，即將模型和視圖進(jìn)行分離。事實(shí)上，不同的JavaScript MVC框架在控制器（controller）方面，其實(shí)現(xiàn)方式也各不相同。有些框架（例如Backbone.js）控制器與視圖的界限比較模糊，原本部分應(yīng)該在控制器中進(jìn)行的操作直接就在視圖中實(shí)現(xiàn)了，有些框架（例如Ember.js和ExtJS）則將控制器作為調(diào)度中心，用來啟動(dòng)應(yīng)用程序、初始化數(shù)據(jù)模型、監(jiān)測(cè)數(shù)據(jù)變化、調(diào)用相應(yīng)操作等。

從設(shè)計(jì)模式來說，JavaScript MVC框架主要采用觀察者模式、策略模式和組合模式，根據(jù)不同框架的實(shí)現(xiàn)方式，也可能會(huì)用到工廠模式和模板方法模式。JavaScript MVC框架采用觀察者模式實(shí)現(xiàn)內(nèi)部核心通信（當(dāng)數(shù)據(jù)變化時(shí)通知觀察者），通過這種方式實(shí)現(xiàn)多個(gè)視圖綁定到一個(gè)模型并進(jìn)行同步。

4 Backbone.js在Web開發(fā)中的應(yīng)用

u強(qiáng)制依賴于 Underscore.js。

u非強(qiáng)制依賴于 jQuery/Zepto。

u根據(jù)模型的變更自動(dòng)更新應(yīng)用程序的 HTML，有助于代碼維護(hù)。

u促進(jìn)客戶端模板使用，避免了在 JavaScript 中嵌入 HTML 代碼。

Backbone.js客戶端MVC流程如下：

5 結(jié)束語

JavaScript MVC 框架仍然不夠成熟，這個(gè)領(lǐng)域正在發(fā)生快速改變，缺少一致認(rèn)可的最佳實(shí)踐。在Web開發(fā)中，為了實(shí)現(xiàn)客戶端代碼的可讀性、易測(cè)試、可維護(hù)性和可擴(kuò)展性，僅僅采用JavaScript MVC框架還不夠，還要考慮如何組織代碼文件、如何將代碼分割、如何將狀態(tài)和DOM分離、解決依賴等方面。

參考文獻(xiàn)：

[3] JavaScript MVC frameworks：A Comparison of Marionette and Chaplin - Mathias Sch?fer[EB/OL].http：//9elements.com/io/index.php/comparison-of-marionette-and-chaplin/.

[4] Backbone.js[EB/OL]. http：//backbonejs.org/.

[5] Backbone Tutorials-Thomas Davis[EB/OL]. http：//backbonetutorials.com/.

[7] Observer Pattern Using JavaScript - Salvatore Vetro[EB/OL]. http：//www.codeproject.com/Articles/13914/Observer-Design-Pattern-Using-JavaScript.