由項目淺談JS中MVVM模式

時間 2019-11-10

原文原文鏈接

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

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等。requirejs

MVC的優勢就不用跟你們一一介紹了。這裏大體說下此開發模式的一個缺點。學習

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

就我我的的開發經驗上來講即是，Web開發中的Controller主要是指後臺端的Controller，它對請求進行解析，返回一個Model給指定的View，由通常用JSP寫的View來對Model進行解析和展現。可是在前端中的View層面上，很難實現View和Model的分離。也就是張佔嶺提到的View裏包含Model信息。而且因爲Model的展現與業務需求有關，JSP中自己還常常嵌帶標籤語句和JS語句來完成View的展現。因此JSP的重複利用率是很低的。.net

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

同時，在Flex和WPF中均提出了數據綁定這種概念，也就是View由數據來驅動。當數據變更時View便進行改變，View中數據變更時也會致使綁定的數據變更。利用此概念，咱們能夠正式開啓前端的MVVM模式了，即（Model-View-ViewModel），因而咱們的MVC模式變成了——C（後臺）+MVVM。