MVC
ModelViewController (MVC)是一種把信息展現邏輯和用戶交互分離的計算機用戶界面開發模式;Model包含應用的數據和業務邏輯;Controller負責把用戶的輸入,轉換為命令傳遞給Model和View;這是維基百科的解釋;
這種模式最初是由Trygve Reenskaug在使用Smalltalk-80(1979)工作時設計的,剛開始叫做Model-View-Controller-Editor;後來通過《Design Patterns: Elements of Reusable Object-Oriented Software》這本書的深入介紹,才使得mvc徹底流行開來;
理解組成MVC三部分的職責,以及現有的這些javascript框架為我們提供了什麼,才能夠使我們更好的使用這些框架。下面我們先通關過組成MVC的三個部分來學習下每部分的職責是什麼【以backbone為例給出示范代碼】。
Model
Model管理應用的數據。當model數據發生改變的時候,會通知它的監聽者【可能是view】,收到通知後,監聽者會做相應的變化。
View
View是當前狀態的model的視覺展現,view會觀察模型的變化,當模型改變的時候被通知,同時允許view來更新自己。一般情況下我們會在view中使用模版引擎渲染model;
Controllers
Controllers是位於models和views的之間的調解人,它的工作是當model改變時來更新view和當用戶操作view時來更新Model。
javascipt mvc框架對比
不同的人對比方法不一樣,關鍵看你關注什麼什麼地方:
1.如果你比較關注框架的URL路由,數據存儲,視圖實現等細節,可以重點關注這裡,javascript寶座:框架論劍;
2.如果你比較關注框架的具體實例,這裡有一個開源項目是專門對同一個demo採用不同的javascript mvc框架實現,可以非常明確定的看出每種框架在具體應用上的差別,具體實現在這裡,TodoMVC官方站點
MVC給我們帶來的好處:
1.易於維護
2.模型視圖的解耦,意味著可以對業務邏輯更好的進行單元測試
3.代碼能夠更好的重用
4.模塊化的開發能夠使分工更加明確,一部分人專注業務邏輯,一部分人專注用戶界面。
5.回顧了經典的mvc模型,我們明白了應用中分層的概念以及每層的職責,同時也應該能夠鑑別所有的javascript mvc框架與我們所解釋的經典的mvc模型有什麼差別。這樣的話我們在選擇mvc框架時就應該應該重點關注models,views,controller具體怎麼實現的,甚至於具體代碼怎麼實現,才能夠幫助我們更好的選擇最適用與我們的javascript mvc框架。
MVVM
MVVM的全稱是Model View ViewModel,這種架構模式最初是由微軟的MartinFowler作為微軟軟件的展現層設計模式的規範提出,它是MVC模式的衍生物,MVVM模式的關注點在能夠支持事件驅動的UI開發平台,例如HTML5,[2][3] WindowsPresentation Foundation (WPF), Silverlight 和t ZK framework,Adobe Flex。
對這種模式的實現,大部分都是通過在view層聲明數據綁定來和其他層分離的,這樣就方便了前端開發人員和後端開發人員的分工,前端開發人員在html標籤中寫對viewmodel的綁定數據,model和viewmodel是後端開發人員通過開發應用的邏輯來維護這兩層。
最近幾年,mvvm模式在javascript中開始有人實現,目前比較成熟的框架有KnockoutJS, Kendo MVVM和Knockback.js,下面我們就以KnockoutJS為例看下MVVM模式中個部分的具體職責和實例代碼,同時理解使用這種模式開發的優點和缺點。
Model
同其他的mv*家族成員一樣,Model代表特定領域的數據或者應用所需的數據,一個典型的特定領域的數據如用戶信息【用戶名,頭像,email,電話】,或者一首音樂的信息【歌曲名,發行年份,專輯】;
Model僅僅關注數據信息,不關心任何行為;她不格式化數據或者影響數據在瀏覽器中的展現,這些不是他的職責;格式化數據是view層的任務,同時業務邏輯層被封裝在viewmodel中,用來和model進行交互。
在Model層做的一個比較意外的行為是對數據的驗證,比如當用戶輸入email的時候,判斷email的格式是否正確。
在KnockoutJS中,Model基本是按照上面的定義來實現的,但是會有通過ajax調用服務器服務來進行讀寫Model數據。
View
View是指應用中和用戶直接交互的部分,他是一個交互式的UI來表示ViewModel的狀態,View被認為是主動的,而不是被動的?這句話的意思是說被動的View在應用中不關心model的領域,model的領域在controller中維護;MVVM的主動式的View包含數據綁定,事件和需要理解model和viewmodel的行為,儘管這些行為可以和屬性對應,view仍然需要響應viewmodel的事件,同時View不負責控制狀態。
KnockoutJS的view層就是一個簡單的html文檔,它裡面會有關聯到viewmodel的數據聲明,同時KnockoutJS的view層顯示從ViewModel中獲取的數據,傳遞命令給viewmodel,並且更新viewmodel改變的狀態。
ViewModel
可以認為ViewModel是一個專門用於數據轉換的Controller,它可以把Model中的信息轉換為View中的信息,同時從View專遞命令給Model;
從這個意義上來說,ViewModel看上去更像一個Model,但是它控制著View的很多顯示邏輯,同時ViewModel也暴漏一些方法用來維護view的狀態,根據View的行為和事件來更新model;
綜上,ViewModel位於UI層的後面,暴漏數據給View,可以認為是View層的數據和行為的源;
KnockoutJS把ViewModel解釋為數據的展現和表現在UI上的行為,他不是ui需要持久化的數據模型,但是他可以持有用戶存儲的數據;Knockout的ViewModels是採用javascript對象實現的,不用關心html標籤,這種抽象的方法可以使它們的實現保持簡單。
優點:
1.MVVM使並行開發更加容易,使前端開發和後端開發人員互不影響。
2.抽象化View層,減少了代碼中的業務邏輯
3.ViewModel比事件驅動更容易測試
4.ViewModel的測試不用關心uI的自動化和交互
缺點:
1.對於簡單的ui,使用MVVM有點太重
2.聲明式的數據綁定不利於調試,因為命令式的代碼可以和容易的設置斷點,這種模式就不利於設置這樣的斷點
3.在不挑剔(non-trivial)的應用里數據綁定可以創建大量的簿記(book-keeping)。你也不想結束於綁定比被綁定的對象更複雜的情況。
4.在大的應用中,在獲取大量的概要(generalization)前很難設計視圖-模型層