由項目淺談JS中MVVM模式－互聯網

文章版權由作者李曉暉和博客園共有，若轉載請于明顯處標明出處：http://www.cnblogs.com/naaoveGIS/。

1. 背景

最近項目原因使用了durandal.js和knockout.js，頗有受益。決定寫一個比較淺顯的總結。

之前一直在用SpringMVC框架寫后臺，前臺是用JSP+JS+標簽庫，算是很傳統的MVC開發模式了。后來，前端用Flex還有微軟的WPF做過開發，到這次，前端使用純JS+HTML，利用knockout.js，也算是接觸了幾種語言下的MVVM模式。

此次開發中，結合require.js和durandal.js，完成了按需加載、AMD規范以及前端頁面路由。當然了，一般控件的編寫和改用，還是使用的老熟人Jquery。

由于我個人一直是更傾向于GIS的理論和算法研究，平心而論，并不算一個在前端上有造詣的人，寫的不好望大家見諒。

2.MVC、MVP和MVVM的對比

MVC這種經典模式，基本做WEB開發的人都是最先接觸到這種開發方式的。各種框架，也都提供了這種模式的支持，比如Spring、Struts、Hibernate等。

MVC的優點就不用跟大家一一介紹了。這里大致說下此開發模式的一個缺點。

張占嶺老師在其博客（http://www.cnblogs.com/lori/p/3501764.html）很詳細的講解了它的缺點。這里進行引用：View是可以直接訪問Model的！從而，View里會包含Model信息，不可避免的還要包括一些業務邏輯。在MVC模型里，更關注的Model的不變，而同時有多個對Model的不同顯示，及View。所以，在MVC模型里，Model不依賴于View，但是 View是依賴于Model的。不僅如此，因為有一些業務邏輯在View里實現了，導致要更改View也是比較困難的，至少那些業務邏輯是無法重用的。

就我個人的開發經驗上來說便是，Web開發中的Controller主要是指后臺端的Controller，它對請求進行解析，返回一個Model給指定的View，由一般用JSP寫的View來對Model進行解析和展示。但是在前端中的View層面上，很難實現View和Model的分離。也就是張占嶺提到的View里包含Model信息。并且由于Model的展示與業務需求有關，JSP中本身還經常嵌帶標簽語句和JS語句來完成View的展示。所以JSP的重復利用率是很低的。

再后來，Flex和WPF出現了。這兩種前端開發方式，號稱是RIA技術。Flex中倡導用MXML來寫界面，AS來寫邏輯。WPF中倡導用XAML來寫界面，C#來寫邏輯。也就是專門做一個presenter，將后臺返回的Model進行處理，然后在View中進行顯示。而View對Model的修改也是通過presenter來進行控制。那么這個流程變成了：后臺的Controller返回Bean，前臺的Presenter進行解析來顯示View，反轉過去也是相同：即C（后臺）+MPV。

同時，在Flex和WPF中均提出了數據綁定這種概念，也就是View由數據來驅動。當數據變動時View便進行改變，View中數據變動時也會導致綁定的數據變動。利用此概念，我們可以正式開啟前端的MVVM模式了，即（Model-View-ViewModel），于是我們的MVC模式變成了——C（后臺）+MVVM。