JavaScript客戶端MVC框架用法

　　導(dǎo)語(yǔ)：JavaScript客戶端MVC框架用法你會(huì)嗎？下面的是百分網(wǎng)小編為大家搜集的JavaScript客戶端MVC框架用法，供大家參考。

　　15 年前，許多人都使用 Perl 和 ColdFusion 之類的工具構(gòu)建網(wǎng)站。我們經(jīng)常編寫(xiě)可以在頁(yè)面頂部查詢數(shù)據(jù)庫(kù)的腳本，對(duì)數(shù)據(jù)應(yīng)用必要的轉(zhuǎn)換，以及在同一個(gè)腳本底部顯示數(shù)據(jù)。這類架構(gòu)適合于向網(wǎng)站添加簡(jiǎn)單 的 “Contact us” 表單。然而，隨著應(yīng)用程序變得更加復(fù)雜，這種方法無(wú)法進(jìn)行相應(yīng)的擴(kuò)展來(lái)處理更大的復(fù)雜問(wèn)題。大部分 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)用程序的主流庫(kù)。然而，隨著應(yīng)用程序中的 JavaScript 的復(fù)雜性日益增加，jQuery 成為一項(xiàng)處理復(fù)雜性的必要不充分技術(shù)。例如，用于待辦事項(xiàng) (to-do) 列表的單頁(yè)面應(yīng)用程序可以包含一個(gè)緊急待辦事項(xiàng)列表、一個(gè)完整的待辦事項(xiàng)列表、一個(gè)當(dāng)日待辦事項(xiàng)列表，以及一個(gè)過(guò)期待辦事項(xiàng)列表。在刪除某個(gè)待辦事項(xiàng)時(shí)會(huì) 怎樣？如果任務(wù)很緊急但已過(guò)期，您可能需要手動(dòng)編寫(xiě)代碼來(lái)從視圖中的三個(gè)或四個(gè)不同位置中刪除該事項(xiàng)。如果刪除某個(gè)對(duì)象后需要您刪除或更改屏幕上顯示的其 他相關(guān)對(duì)象，這樣復(fù)雜性就會(huì)變得無(wú)法控制。

　　客戶端 MVC 框架旨在解決此類問(wèn)題，并且大多數(shù)框架都表現(xiàn)出色。但是您如何從許多 JavaScript 客戶端 MVC 框架中選擇合適的框架。本文將從較高的層面簡(jiǎn)要介紹其中一些最流行的框架。以及如何針對(duì)給定的用例選擇合適的框架。

　　Backbone.js

　　在使用率方面，Backbone 是目前為止最流行的客戶端 MVC 框架。它被廣泛應(yīng)用于各個(gè)開(kāi)發(fā)社區(qū)，Rails 開(kāi)發(fā)人員對(duì)它的采用率一直較高，并出現(xiàn)了許多廣受歡迎的資源，比如 thoughtbot（一家備受尊敬的 Rails 咨詢公司）推出了 Backbone on Rails（參見(jiàn) 參考資料）。Backbone.js 的優(yōu)勢(shì)在于它與具象狀態(tài)傳輸 Web 服務(wù)實(shí)現(xiàn)了良好的集成。如果您對(duì)后端數(shù)據(jù)使用 RESTful JavaScript Object Notation (JSON) 模型并遵循 Backbone 所期望的約定（與 Rails 中的約定匹配），那么您不需要編寫(xiě)任何代碼就可以將 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í)用工具，可以通過(guò)更加功能化的方式簡(jiǎn)化 JavaScript 的編寫(xiě)，并支持一系列有用的基于集合的操作。它還包括 Backbone.history，后者可以幫助您巧妙地處理頁(yè)面導(dǎo)航。

　　Backbone.js 主要優(yōu)勢(shì)在于它與服務(wù)器的自動(dòng)集成。如果這樣做適合您的用例，那么學(xué)習(xí)如何使用 Backbone.js 將是值得的。您可以通過(guò)一些框架在一兩個(gè)小時(shí)之內(nèi)初步掌握可能需要花一到兩天學(xué)習(xí)的Backbone.js 基礎(chǔ)知識(shí)。這非常適合比較大的項(xiàng)目，這類項(xiàng)目至少持續(xù)幾周的時(shí)間。

　　Backbone.js 仍然算不上一種完好的解決方案。您可能需要編寫(xiě)相當(dāng)數(shù)量的代碼來(lái)處理潛在的內(nèi)存泄露等問(wèn)題。您還可能需要試驗(yàn)幾種方法來(lái)查看呈現(xiàn)內(nèi)容，之后才能找到真正滿足需求的方法。

　　Spine.js

　　Spine.js 通常與 Backbone.js 進(jìn)行比較；它受到 Backbone.js 的影響，并在使用率方面與前者接近。Spine.js 包含類、模型、控制器和視圖，這比 Backbone.js 引入的集合更加傳統(tǒng)一些。

　　Spine.js 使用 CoffeeScript（參見(jiàn) 參考資料）編寫(xiě)，這使它更加簡(jiǎn)練且（依我看來(lái)）更易于讀取源代碼。要了解 Spine.js 如何工作，您需要熟悉 CoffeeScript。然而，您不必使用 CoffeeScript 構(gòu)建 Spine.js 應(yīng)用程序。但是，如果已使用 CoffeeScript 進(jìn)行了構(gòu)建，您可以訪問(wèn) CoffeeScript 特性（如類）。CoffeeScript 使用原型繼承而非經(jīng)典繼承，因而無(wú)法支持在本地 JavaScript 中的類。CoffeeScript 使用了一些非常標(biāo)準(zhǔn)的模式，為希望使用它們的開(kāi)發(fā)人員提供類。如果使用純 JavaScript 編寫(xiě) Spine.js 應(yīng)用程序，您只需使用 ，后者使您不需要編寫(xiě) CoffeeScript 代碼就可以訪問(wèn)類。

　　Spine.js 中的模型、控制器和視圖都使用類實(shí)現(xiàn)，因此可以同時(shí)編寫(xiě)類和實(shí)例方法。模型負(fù)責(zé)處理業(yè)務(wù)邏輯，屬于模塊類，您可以擴(kuò)展并包括其他模塊，從而混合重用屬性和 功能。模型可以自動(dòng)序列化到 JSON 中，通過(guò)僅使用本地存儲(chǔ)實(shí)現(xiàn)持久化�；蛘呖梢允褂� Asynchronous JavaScript + XML (Ajax) 將對(duì)象持久化到服務(wù)器中。和 Backbone.js 一樣，Spine.js 現(xiàn)在提供了合理的默認(rèn)設(shè)置，可以通過(guò) Ajax 實(shí)現(xiàn)持久化，但是仍可以在必要時(shí)編寫(xiě)自己的特定實(shí)現(xiàn)，并且非常簡(jiǎn)單。清單 2 展示了來(lái)自一個(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ù)器來(lái)檢查狀態(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è)問(wèn)題存在一些 應(yīng)急方案，但是通常來(lái)講 Spine.js 更加適合用戶操作自有（而非共享）數(shù)據(jù)。Spine.js 的一個(gè)常見(jiàn)用例就是購(gòu)物車(chē)，其中所有驗(yàn)證都可以在客戶端處理。

　　Knockout

　　人們可能會(huì)爭(zhēng)論目前為止討論的這些工具是否是原本意義上的真正的 MVC 框架。Knockout 明確實(shí)現(xiàn)了模型-視圖-視圖-模型 (MVVM)，而不是經(jīng)典的 MVC。但是，不要因此而妨礙到您的決策制定。在選擇框架時(shí)，更重要的是查看所提供的功能而非首字母縮略詞或分類。

　　Knockout.js 在熟悉 MVVM 模型的 Microsoft .NET 開(kāi)發(fā)人員之間特別受歡迎。對(duì)于主要問(wèn)題是將模型狀態(tài)通過(guò)聲明的方式綁定到視圖用例，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 中，這些可以通過(guò)聲明的方式綁定到視圖模型（方便入門(mén)）。一些學(xué)員可以在一個(gè)小時(shí)內(nèi)掌握并使用 Knockout，并可在三個(gè)小時(shí)內(nèi)構(gòu)建非凡 (non-trivial) 應(yīng)用程序。

　　一般來(lái)講，Knockout.js 比較適合較小、較簡(jiǎn)單的項(xiàng)目。人們往往將 Backbone.js 或 Spine.js 用于更大、更復(fù)雜的項(xiàng)目。也就是說(shuō)，有經(jīng)驗(yàn)的 Knockout.js 開(kāi)發(fā)人員可以創(chuàng)建非常復(fù)雜、同時(shí)又易于維護(hù)的應(yīng)用程序。如果考慮使用 Knockout.js，您也應(yīng)當(dāng)考慮 Angular.js 和 Sammy.js（參見(jiàn) 參考資料），后兩者是兩種相對(duì)輕量級(jí)、易于啟動(dòng)的框架。

　　Batman.js

　　Batman.js 是一種有趣的新框架，由 JSConf 在 2011 年推出，但是又經(jīng)過(guò)了幾個(gè)月的時(shí)間才能夠通過(guò)下載獲取。Batman.js 已經(jīng)開(kāi)始受到一些喜歡并得到開(kāi)發(fā) MVC 應(yīng)用程序的程序員的關(guān)注。表面上看，Batman 在易于入門(mén)、支持視圖聲明綁定方面與 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 編寫(xiě)的模板，還有一些用 data-* 屬性綁定模型數(shù)據(jù)并觸發(fā)事件處理器的構(gòu)件�？刂破鳛橐恍┯谰脤�(duì)象，處理來(lái)自視圖的事件，訪問(wèn)模型數(shù)據(jù)，并呈現(xiàn)相應(yīng)的視圖。

　　選擇一種 JavaScript 框架

　　如果您正在從事一個(gè)長(zhǎng)期的大項(xiàng)目，那么了解 Backbone.js 或 Spine.js 很有必要，因?yàn)樗鼈儷@得了廣泛的采用，可以解決您可能遇到的問(wèn)題。然而，即使有了這些項(xiàng)目，您要明白您不是有必要使用一個(gè)成熟的服務(wù)器端 MVC 框架，而是還需繼續(xù)編寫(xiě)基礎(chǔ)架構(gòu)代碼。

　　嘗試使用在視圖中用了聲明式綁定的框架將非常有必要。此類框架具有與 Backbone.js 之類的項(xiàng)目不同的優(yōu)缺點(diǎn)。如果考慮使用聲明式視圖綁定，那么花些時(shí)間研究一下更新的 Batman.js 框架提供的額外功能。雖然 Batman.js 不像其他框架那么流行，但它正在快速發(fā)展，而且提供了比普通客戶端 MVC 框架更豐富的特性。

　　在不同框架中進(jìn)行原型化，感受一下這些框架的用法，這樣做非常有必要。特別是對(duì)于客戶端 MVC 框架來(lái)說(shuō)，原型化是從不同選項(xiàng)中進(jìn)行選擇的最快速、最有效的方法之一。一種方法是讓每個(gè)團(tuán)隊(duì)成員花一到兩天的時(shí)間，使用不同的框架進(jìn)行原型化，然后進(jìn)行回 顧并討論結(jié)果。最壞的情況是，如果您還有一對(duì)框架需要從中進(jìn)行選擇，那么再額外花一天左右的時(shí)間構(gòu)建二者的概念，直到選出最適合您的用例的框架。

　　考慮靈活性。仔細(xì)考慮您可以做哪些工作來(lái)降低對(duì)框架的依賴性，這對(duì)于許多框架來(lái)說(shuō)是一個(gè)艱巨的任務(wù)。為將來(lái) 12 到 18 個(gè)月內(nèi)遷移到另一個(gè)框架制定一個(gè)備份方案，以防您發(fā)現(xiàn)需求和所選的框架沒(méi)有按照預(yù)期進(jìn)行。

　　結(jié)束語(yǔ)

　　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)文章：

PHP MVC框架路由學(xué)習(xí)筆記07-02

如何使用PHP開(kāi)發(fā)自己的MVC框架05-21

Yii框架form表單用法實(shí)例02-06

PHP.MVC的模板標(biāo)簽系統(tǒng)05-13

JavaScript的應(yīng)用01-04

JavaScript與Java的區(qū)別03-30

Java與JavaScript的區(qū)別02-11

怎么在yaf框架增加php擴(kuò)展框架07-24

如何入門(mén)學(xué)習(xí)JavaScript05-16