MVC
Model–View–Controller (MVC)是一種把信息展現(xiàn)邏輯和用戶交互分離的計(jì)算機(jī)用戶界面開(kāi)發(fā)模式；Model包含應(yīng)用的數(shù)據(jù)和業(yè)務(wù)邏輯；Controller負(fù)責(zé)把用戶的輸入，轉(zhuǎn)換為命令傳遞給Model和View;這是維基百科的解釋?zhuān)?br /> 這種模式最初是由Trygve Reenskaug在使用Smalltalk-80(1979)工作時(shí)設(shè)計(jì)的，剛開(kāi)始叫做Model-View-Controller-Editor；后來(lái)通過(guò)《Design Patterns: Elements of Reusable Object-Oriented Software》這本書(shū)的深入介紹，才使得mvc徹底流行開(kāi)來(lái)；
理解組成MVC三部分的職責(zé)，以及現(xiàn)有的這些javascript框架為我們提供了什么，才能夠使我們更好的使用這些框架。下面我們先通關(guān)過(guò)組成MVC的三個(gè)部分來(lái)學(xué)習(xí)下每部分的職責(zé)是什么【以backbone為例給出示范代碼】。
Model
Model管理應(yīng)用的數(shù)據(jù)。當(dāng)model數(shù)據(jù)發(fā)生改變的時(shí)候，會(huì)通知它的監(jiān)聽(tīng)者【可能是view】，收到通知后，監(jiān)聽(tīng)者會(huì)做相應(yīng)的變化。

View
View是當(dāng)前狀態(tài)的model的視覺(jué)展現(xiàn)，view會(huì)觀察模型的變化，當(dāng)模型改變的時(shí)候被通知，同時(shí)允許view來(lái)更新自己。一般情況下我們會(huì)在view中使用模版引擎渲染model;

Controllers
Controllers是位于models和views的之間的調(diào)解人，它的工作是當(dāng)model改變時(shí)來(lái)更新view和當(dāng)用戶操作view時(shí)來(lái)更新Model。

javascipt mvc框架對(duì)比
不同的人對(duì)比方法不一樣，關(guān)鍵看你關(guān)注什么什么地方：
1.如果你比較關(guān)注框架的URL路由，數(shù)據(jù)存儲(chǔ)，視圖實(shí)現(xiàn)等細(xì)節(jié)，可以重點(diǎn)關(guān)注這里，javascript寶座：框架論劍；
2.如果你比較關(guān)注框架的具體實(shí)例，這里有一個(gè)開(kāi)源項(xiàng)目是專(zhuān)門(mén)對(duì)同一個(gè)demo采用不同的javascript mvc框架實(shí)現(xiàn)，可以非常明確定的看出每種框架在具體應(yīng)用上的差別，具體 實(shí)現(xiàn)在這里，TodoMVC官方站點(diǎn)
MVC給我們帶來(lái)的好處：
1.易于維護(hù)
2.模型視圖的解耦，意味著可以對(duì)業(yè)務(wù)邏輯更好的進(jìn)行單元測(cè)試
3.代碼能夠更好的重用
4.模塊化的開(kāi)發(fā)能夠使分工更加明確，一部分人專(zhuān)注業(yè)務(wù)邏輯，一部分人專(zhuān)注用戶界面。
5.回顧了經(jīng)典的mvc模型，我們明白了應(yīng)用中分層的概念以及每層的職責(zé)，同時(shí)也應(yīng)該能夠鑒別所有的javascript mvc框架與我們所解釋的經(jīng)典的mvc模型有什么差別。這樣的話我們?cè)谶x擇mvc框架時(shí)就應(yīng)該應(yīng)該重點(diǎn)關(guān)注models,views,controller具體怎么實(shí)現(xiàn)的，甚至于具體代碼怎么實(shí)現(xiàn)，才能夠幫助我們更好的選擇最適用與我們的javascript mvc框架。 

MVVM
MVVM的全稱(chēng)是Model View ViewModel，這種架構(gòu)模式最初是由微軟的MartinFowler作為微軟軟件的展現(xiàn)層設(shè)計(jì)模式的規(guī)范提出，它是MVC模式的衍生物，MVVM模式的關(guān)注點(diǎn)在能夠支持事件驅(qū)動(dòng)的UI開(kāi)發(fā)平臺(tái)，例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverlight 和 t ZK framework，Adobe Flex。
對(duì)這種模式的實(shí)現(xiàn)，大部分都是通過(guò)在view層聲明數(shù)據(jù)綁定來(lái)和其他層分離的，這樣就方便了前端開(kāi)發(fā)人員和后端開(kāi)發(fā)人員 的分工，前端開(kāi)發(fā)人員在html標(biāo)簽中寫(xiě)對(duì)viewmodel的綁定數(shù)據(jù)，model和viewmodel是后端開(kāi)發(fā)人員通過(guò)開(kāi)發(fā)應(yīng)用的邏輯來(lái)維護(hù)這兩層。
最近幾年，mvvm模式在javascript中開(kāi)始有人實(shí)現(xiàn)，目前比較成熟的框架有KnockoutJS, Kendo MVVM和Knockback.js，下面我們就以KnockoutJS為例看下MVVM模式中個(gè)部分的具體職責(zé)和實(shí)例代碼，同時(shí)理解使用這種模式開(kāi)發(fā)的優(yōu)點(diǎn)和缺點(diǎn)。
Model
同其他的mv*家族成員一樣，Model代表特定領(lǐng)域的數(shù)據(jù)或者應(yīng)用所需的數(shù)據(jù)，一個(gè)典型的特定領(lǐng)域的數(shù)據(jù)如用戶信息【用戶名，頭像，email,電話】，或者一首音樂(lè)的信息【歌曲名，發(fā)行年份，專(zhuān)輯】;
Model僅僅關(guān)注數(shù)據(jù)信息，不關(guān)心任何行為；她不格式化數(shù)據(jù)或者影響數(shù)據(jù)在瀏覽器中的展現(xiàn)，這些不是他的職責(zé)；格式化數(shù)據(jù)是view層的任務(wù)，同時(shí)業(yè)務(wù)邏輯層被封裝在viewmodel中，用來(lái)和model進(jìn)行交互。
在Model層做的一個(gè)比較意外的行為是對(duì)數(shù)據(jù)的驗(yàn)證，比如當(dāng)用戶輸入email的時(shí)候，判斷email的格式是否正確。
在KnockoutJS中,Model基本是按照上面的定義來(lái)實(shí)現(xiàn)的，但是會(huì)有通過(guò)ajax調(diào)用服務(wù)器服務(wù)來(lái)進(jìn)行讀寫(xiě)Model數(shù)據(jù)。  

View
View是指應(yīng)用中和用戶直接交互的部分，他是一個(gè)交互式的UI來(lái)表示ViewModel的狀態(tài)，View被認(rèn)為是主動(dòng)的，而不是被動(dòng)的？這句話的意思是說(shuō)被動(dòng)的View在應(yīng)用中不關(guān)心model的領(lǐng)域，model的領(lǐng)域在controller中維護(hù)；MVVM的主動(dòng)式的View包含數(shù)據(jù)綁定，事件和需要理解model和viewmodel的行為，盡管這些行為可以和屬性對(duì)應(yīng)，view仍然需要響應(yīng)viewmodel的事件,同時(shí)View不負(fù)責(zé)控制狀態(tài)。
KnockoutJS的view層就是一個(gè)簡(jiǎn)單的html文檔，它里面會(huì)有關(guān)聯(lián)到viewmodel的數(shù)據(jù)聲明，同時(shí)KnockoutJS的view層顯示從ViewModel中獲取的數(shù)據(jù)，傳遞命令給viewmodel,并且更新viewmodel改變的狀態(tài)。

ViewModel
可以認(rèn)為ViewModel是一個(gè)專(zhuān)門(mén)用于數(shù)據(jù)轉(zhuǎn)換的Controller,它可以把Model中的信息轉(zhuǎn)換為View中的信息，同時(shí)從View專(zhuān)遞命令給Model;
從這個(gè)意義上來(lái)說(shuō)，ViewModel看上去更像一個(gè)Model,但是它控制著View的很多顯示邏輯，同時(shí)ViewModel也暴漏一些方法用來(lái)維護(hù)view的狀態(tài)，根據(jù)View的行為和事件來(lái)更新model；
綜上，ViewModel位于UI層的后面，暴漏數(shù)據(jù)給View,可以認(rèn)為是View層的數(shù)據(jù)和行為的源；
KnockoutJS把ViewModel解釋為數(shù)據(jù)的展現(xiàn)和表現(xiàn)在UI上的行為，他不是ui需要持久化的數(shù)據(jù)模型，但是他可以持有用戶存儲(chǔ)的數(shù)據(jù)；Knockout的 ViewModels是采用javascript對(duì)象實(shí)現(xiàn)的，不用關(guān)心html標(biāo)簽，這種抽象的方法可以使它們的實(shí)現(xiàn)保持簡(jiǎn)單。

優(yōu)點(diǎn)：
1.MVVM使并行開(kāi)發(fā)更加容易，使前端開(kāi)發(fā)和后端開(kāi)發(fā)人員互不影響。
2.抽象化View層，減少了代碼中的業(yè)務(wù)邏輯
3.ViewModel比事件驅(qū)動(dòng)更容易測(cè)試
4.ViewModel的測(cè)試不用關(guān)心uI的自動(dòng)化和交互
缺點(diǎn)：
1.對(duì)于簡(jiǎn)單的ui，使用MVVM有點(diǎn)太重
2.聲明式的數(shù)據(jù)綁定不利于調(diào)試,因?yàn)槊钍降拇a可以和容易的設(shè)置斷點(diǎn)，這種模式就不利于設(shè)置這樣的斷點(diǎn)
3.在不挑剔(non-trivial)的應(yīng)用里數(shù)據(jù)綁定可以創(chuàng)建大量的簿記(book-keeping)。你也不想結(jié)束于綁定比被綁定的對(duì)象更復(fù)雜的情況。
4.在大的應(yīng)用中，在獲取大量的概要(generalization)前很難設(shè)計(jì)視圖-模型層