轉 。。理解javascript中的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)前很難設計視圖-模型層

在上一篇文章中咱們瞭解了mvc的開發的模式，這兩種開發有什麼不一樣呢，咱們會在下篇文章中作一個具體的分析。