- 相關(guān)推薦
JavaScript客戶端MVC框架用法
導(dǎo)語：JavaScript客戶端MVC框架用法你會嗎？下面的是百分網(wǎng)小編為大家搜集的JavaScript客戶端MVC框架用法，供大家參考。
15 年前，許多人都使用 Perl 和 ColdFusion 之類的工具構(gòu)建網(wǎng)站。我們經(jīng)常編寫可以在頁面頂部查詢數(shù)據(jù)庫的腳本，對數(shù)據(jù)應(yīng)用必要的轉(zhuǎn)換，以及在同一個腳本底部顯示數(shù)據(jù)。這類架構(gòu)適合于向網(wǎng)站添加簡單 的 “Contact us” 表單。然而，隨著應(yīng)用程序變得更加復(fù)雜，這種方法無法進行相應(yīng)的擴展來處理更大的復(fù)雜問題。大部分 Web 應(yīng)用程序現(xiàn)在已經(jīng)對模型-視圖-控制器 (MVC) 架構(gòu)進行了標(biāo)準(zhǔn)化，使用單獨的代碼實現(xiàn)業(yè)務(wù)邏輯、顯示邏輯和用戶交互（路由）邏輯。涌現(xiàn)出從 Spring MVC 到 Rails 的各種框架可以幫助您快速實現(xiàn)基于 MVC 的 Web 應(yīng)用程序。
JavaScript客戶端MVC框架 詳解不同框架用法 三聯(lián)
幾年前，jQuery 是用于構(gòu)建客戶端 JavaScript 應(yīng)用程序的主流庫。然而，隨著應(yīng)用程序中的 JavaScript 的復(fù)雜性日益增加，jQuery 成為一項處理復(fù)雜性的必要不充分技術(shù)。例如，用于待辦事項 (to-do) 列表的單頁面應(yīng)用程序可以包含一個緊急待辦事項列表、一個完整的待辦事項列表、一個當(dāng)日待辦事項列表，以及一個過期待辦事項列表。在刪除某個待辦事項時會 怎樣？如果任務(wù)很緊急但已過期，您可能需要手動編寫代碼來從視圖中的三個或四個不同位置中刪除該事項。如果刪除某個對象后需要您刪除或更改屏幕上顯示的其 他相關(guān)對象，這樣復(fù)雜性就會變得無法控制。
客戶端 MVC 框架旨在解決此類問題，并且大多數(shù)框架都表現(xiàn)出色。但是您如何從許多 JavaScript 客戶端 MVC 框架中選擇合適的框架。本文將從較高的層面簡要介紹其中一些最流行的框架。以及如何針對給定的用例選擇合適的框架。
Backbone.js
在使用率方面，Backbone 是目前為止最流行的客戶端 MVC 框架。它被廣泛應(yīng)用于各個開發(fā)社區(qū)，Rails 開發(fā)人員對它的采用率一直較高，并出現(xiàn)了許多廣受歡迎的資源，比如 thoughtbot（一家備受尊敬的 Rails 咨詢公司）推出了 Backbone on Rails（參見 參考資料）。Backbone.js 的優(yōu)勢在于它與具象狀態(tài)傳輸 Web 服務(wù)實現(xiàn)了良好的集成。如果您對后端數(shù)據(jù)使用 RESTful JavaScript Object Notation (JSON) 模型并遵循 Backbone 所期望的約定（與 Rails 中的約定匹配），那么您不需要編寫任何代碼就可以將 Backbone 連接到服務(wù)器，從而節(jié)省大量的時間。
在 Backbone 中，應(yīng)用程序包含集合（用戶或文章）、模型（單個用戶或文章）、視圖和路由器。Backbone.js 中的視圖是非預(yù)定的 (nonprescriptive)，允許您使用自己喜歡的 JavaScript 模板或框架。路由器結(jié)合了 Rail 風(fēng)格的路由器和一個傳統(tǒng)的 MVC 控制器，負責(zé)獲得給定的 URL 并通知框架要運行的代碼。清單 1 中的 Backbone.js 路由器代碼給出了一個示例。
清單 1. 樣例 Backbone.js 路由器代碼
var Workspace = Backbone.Router.extend（{
routes： {
“help”： “help”, // #help “search/：query”： “search”, // #search/kiwis “search/：query/p:page”： “search” // #search/kiwis/p7 },
help： function（） {
....
},
search： function（query， page） {
.....
}
}）;
Backbone.js 附帶了一個 Underscore.js 副本。Underscore.js 是一組實用工具，可以通過更加功能化的方式簡化 JavaScript 的編寫，并支持一系列有用的基于集合的操作。它還包括 Backbone.history，后者可以幫助您巧妙地處理頁面導(dǎo)航。
Backbone.js 主要優(yōu)勢在于它與服務(wù)器的自動集成。如果這樣做適合您的用例，那么學(xué)習(xí)如何使用 Backbone.js 將是值得的。您可以通過一些框架在一兩個小時之內(nèi)初步掌握可能需要花一到兩天學(xué)習(xí)的Backbone.js 基礎(chǔ)知識。這非常適合比較大的項目，這類項目至少持續(xù)幾周的時間。
Backbone.js 仍然算不上一種完好的解決方案。您可能需要編寫相當(dāng)數(shù)量的代碼來處理潛在的內(nèi)存泄露等問題。您還可能需要試驗幾種方法來查看呈現(xiàn)內(nèi)容，之后才能找到真正滿足需求的方法。
Spine.js
Spine.js 通常與 Backbone.js 進行比較；它受到 Backbone.js 的影響，并在使用率方面與前者接近。Spine.js 包含類、模型、控制器和視圖，這比 Backbone.js 引入的集合更加傳統(tǒng)一些。
Spine.js 使用 CoffeeScript（參見 參考資料）編寫，這使它更加簡練且（依我看來）更易于讀取源代碼。要了解 Spine.js 如何工作，您需要熟悉 CoffeeScript。然而，您不必使用 CoffeeScript 構(gòu)建 Spine.js 應(yīng)用程序。但是，如果已使用 CoffeeScript 進行了構(gòu)建，您可以訪問 CoffeeScript 特性（如類）。CoffeeScript 使用原型繼承而非經(jīng)典繼承，因而無法支持在本地 JavaScript 中的類。CoffeeScript 使用了一些非常標(biāo)準(zhǔn)的模式，為希望使用它們的開發(fā)人員提供類。如果使用純 JavaScript 編寫 Spine.js 應(yīng)用程序，您只需使用 ，后者使您不需要編寫 CoffeeScript 代碼就可以訪問類。
Spine.js 中的模型、控制器和視圖都使用類實現(xiàn)，因此可以同時編寫類和實例方法。模型負責(zé)處理業(yè)務(wù)邏輯，屬于模塊類，您可以擴展并包括其他模塊，從而混合重用屬性和 功能。模型可以自動序列化到 JSON 中，通過僅使用本地存儲實現(xiàn)持久化。或者可以使用 Asynchronous JavaScript + XML (Ajax) 將對象持久化到服務(wù)器中。和 Backbone.js 一樣，Spine.js 現(xiàn)在提供了合理的默認設(shè)置，可以通過 Ajax 實現(xiàn)持久化，但是仍可以在必要時編寫自己的特定實現(xiàn)，并且非常簡單。清單 2 展示了來自一個 Spine.js 應(yīng)用程序中的 CoffeeScript 代碼的示例。
清單 2. Spine.js 應(yīng)用程序中的 CoffeeScript
class Contact extends Spine.Model
@configure “Contact”, “first_name”, “last_name”
@filter: （query） ->
@select （c） ->
c.first_name.indexOf（query） is not -1
fullName: -> ［@first_name， @last_name］.join（‘ ’）
Spine.js 和 Backbone.js 兩者之間最主要區(qū)別是它們處理服務(wù)器交互的方式。Backbone.js 在顯示響應(yīng)之前將等待服務(wù)器響應(yīng)。如果試圖刪除、插入或更新某個元素，用戶界面 (UI) 直到操作成功完成才會刷新。而 Spine.js 側(cè)重于即時更新 UI，而且在進行后臺處理時處理 Ajax 服務(wù)器。這種更新是一種非常重要的實踐，也是在這兩種優(yōu)化的擁有良好編檔的流行框架之間選擇時需要考慮的的主要因素。
如果您的目標(biāo)是創(chuàng)建一種客戶端體驗，而對服務(wù)器狀態(tài)的更新是次要的，那么 Spine.js 可能是一種更好的選擇。如果仍然使用服務(wù)器來檢查狀態(tài)變化的有效性則 Backbone.js 可能更適合。Spine.js 提供了響應(yīng)性更好的 UI。但是，如果顯示成功刪除某個元素，只是讓服務(wù)器發(fā)送一個響應(yīng)，不允許您刪除該項，因為該項正在被其他人使用，那么會發(fā)生什么？針對這個問題存在一些 應(yīng)急方案，但是通常來講 Spine.js 更加適合用戶操作自有（而非共享）數(shù)據(jù)。Spine.js 的一個常見用例就是購物車，其中所有驗證都可以在客戶端處理。
Knockout
人們可能會爭論目前為止討論的這些工具是否是原本意義上的真正的 MVC 框架。Knockout 明確實現(xiàn)了模型-視圖-視圖-模型 (MVVM)，而不是經(jīng)典的 MVC。但是，不要因此而妨礙到您的決策制定。在選擇框架時，更重要的是查看所提供的功能而非首字母縮略詞或分類。
Knockout.js 在熟悉 MVVM 模型的 Microsoft .NET 開發(fā)人員之間特別受歡迎。對于主要問題是將模型狀態(tài)通過聲明的方式綁定到視圖用例，Knockout.js 是非常好的選擇。Knockout.js 對于前面提到的示例待辦事項應(yīng)用程序是非常理想的選擇，該應(yīng)用程序的主待辦事項列表的子集都有自己的視圖，在刪除某個待辦事項后需要更新所有的列表。
在 Knockout.js 中，您將創(chuàng)建模型、視圖模型和視圖。與在 Spine.js 和 Backbone.js 中一樣，負責(zé)處理業(yè)務(wù)邏輯、驗證和與遠程服務(wù)器交互的 Ajax（假設(shè)您不僅僅是創(chuàng)建一個本地應(yīng)用程序）。視圖模型代碼負責(zé)保留和操作模型數(shù)據(jù)。例如一個視圖模型可能包含添加、編輯以及從列表中刪除內(nèi)容項的方 法。視圖模型非常貼近于傳統(tǒng)的 MVC 架構(gòu)中的控制器。視圖就是一些模板，包含將信息呈現(xiàn)到屏幕的標(biāo)記。在 Knockout.js 中，這些可以通過聲明的方式綁定到視圖模型（方便入門）。一些學(xué)員可以在一個小時內(nèi)掌握并使用 Knockout，并可在三個小時內(nèi)構(gòu)建非凡 (non-trivial) 應(yīng)用程序。
一般來講，Knockout.js 比較適合較小、較簡單的項目。人們往往將 Backbone.js 或 Spine.js 用于更大、更復(fù)雜的項目。也就是說，有經(jīng)驗的 Knockout.js 開發(fā)人員可以創(chuàng)建非常復(fù)雜、同時又易于維護的應(yīng)用程序。如果考慮使用 Knockout.js，您也應(yīng)當(dāng)考慮 Angular.js 和 Sammy.js（參見 參考資料），后兩者是兩種相對輕量級、易于啟動的框架。
Batman.js
Batman.js 是一種有趣的新框架，由 JSConf 在 2011 年推出，但是又經(jīng)過了幾個月的時間才能夠通過下載獲取。Batman.js 已經(jīng)開始受到一些喜歡并得到開發(fā) MVC 應(yīng)用程序的程序員的關(guān)注。表面上看，Batman 在易于入門、支持視圖聲明綁定方面與 Knockout.js 類似。Batman.js 提供了一些其他功能，包括可選的全棧 (full-stack) 框架，用于自動代碼生成器、構(gòu)建工具甚至后端 Node.js 服務(wù)器代碼，可以實現(xiàn)您的服務(wù)器端 API。
和 Knockout.js 一樣，Batman.js 也使用視圖綁定。清單 3展示了一些樣例視圖代碼。
清單 3. Batman.js 中的視圖代碼示例
<ul id=“items">
<li data-foreach-todo=“Todo.all” data-mixin=“animation”>
<input type=“checkbox” data-bind=“todo.isDone” data-event-change=“todo.save” />
<label data-bind=“todo.body” data-addclass-done=“todo.isDone”
data-mixin=“editable”></label>
<a data-event-click=“todo.destroy">delete</a>
</li>
<li><span data-bind=“Todo.all.length”></span>
<span data-bind=“‘item’ | pluralize Todo.all.length”></span></li>
</ul>
清單 3中的代碼是有效的 HTML5，包含一些額外的屬性，供 Batman 綁定數(shù)據(jù)和事件。在 Batman.js 中，您的應(yīng)用程序包含模型、視圖和控制器。模型支持驗證功能，能夠?qū)崿F(xiàn)生命周期事件，包括一個內(nèi)置的恒等映射 (identity map)，并且可以被告知（主動記錄樣式）如何堅持使用 、Batman.RestStorage、Batman.RailsStorage 或自定實現(xiàn)。視圖為一些 JavaScript 類，呈現(xiàn)用純 HTML 編寫的模板，還有一些用 data-* 屬性綁定模型數(shù)據(jù)并觸發(fā)事件處理器的構(gòu)件�？刂破鳛橐恍┯谰脤ο螅幚韥碜砸晥D的事件，訪問模型數(shù)據(jù)，并呈現(xiàn)相應(yīng)的視圖。
選擇一種 JavaScript 框架
如果您正在從事一個長期的大項目，那么了解 Backbone.js 或 Spine.js 很有必要，因為它們獲得了廣泛的采用，可以解決您可能遇到的問題。然而，即使有了這些項目，您要明白您不是有必要使用一個成熟的服務(wù)器端 MVC 框架，而是還需繼續(xù)編寫基礎(chǔ)架構(gòu)代碼。
嘗試使用在視圖中用了聲明式綁定的框架將非常有必要。此類框架具有與 Backbone.js 之類的項目不同的優(yōu)缺點。如果考慮使用聲明式視圖綁定，那么花些時間研究一下更新的 Batman.js 框架提供的額外功能。雖然 Batman.js 不像其他框架那么流行，但它正在快速發(fā)展，而且提供了比普通客戶端 MVC 框架更豐富的特性。
在不同框架中進行原型化，感受一下這些框架的用法，這樣做非常有必要。特別是對于客戶端 MVC 框架來說，原型化是從不同選項中進行選擇的最快速、最有效的方法之一。一種方法是讓每個團隊成員花一到兩天的時間，使用不同的框架進行原型化，然后進行回 顧并討論結(jié)果。最壞的情況是，如果您還有一對框架需要從中進行選擇，那么再額外花一天左右的時間構(gòu)建二者的概念，直到選出最適合您的用例的框架。
考慮靈活性。仔細考慮您可以做哪些工作來降低對框架的依賴性，這對于許多框架來說是一個艱巨的任務(wù)。為將來 12 到 18 個月內(nèi)遷移到另一個框架制定一個備份方案，以防您發(fā)現(xiàn)需求和所選的框架沒有按照預(yù)期進行。
結(jié)束語
JavaScript 客戶端 MVC 框架仍然不夠成熟。這個領(lǐng)域正在發(fā)生快速改變，缺少一致認可的最佳實踐。對于較大的項目 Backbone.js 和 Spine.js 都是非常流行、具有良好支持的。如果傾向于聲明視圖綁定，那么 Knockout.js 和 Batman.js 則都是不錯的選擇。
【JavaScript客戶端MVC框架用法】相關(guān)文章：
Yii框架form表單用法實例03-02
JavaScript的應(yīng)用03-30
PHP.MVC的模板標(biāo)簽系統(tǒng)11-22
CSS和JavaScript腳本實例03-29
如何檢查JavaScript變量的類型11-30