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