相信熟悉appcan的開發者都知道，appcan官方在4.0中引入了許多新的特性和功能，其中引入的MVVM在我看來是最好的一個特性，因為之前用了很長一段時間的AngularJS，所以對這種MVVM的模式非常感興趣。
MVVM（Model-View-ViewModel)是在MVC(Model-View-Control)模式之后引出的新的開發模式，他與MVC模式一樣用于把視圖（界面）和數據進行解耦，不同的是采用ViewModel來完成數據與視圖的雙向綁定，通過自動化的方式承擔大部分數據工作，來解決由于界面復雜化和快速迭代帶來的問題。
AppCan MVVM技術框架提供視圖模型(ViewModel)、數據模型（Model、Collection)和服務(Service)四個組件來構建開發者的MVVM開發體系。

MVVM.Service

Service主要負責與后端服務器進行通訊的處理，一般我們使用Ajax接口進行通訊，Ajax的封裝已經能夠支持我們應用開發，但是由于在移動開發過程中，還可能引入其他通訊方式，同時有些場景還需要對通訊參數進行調整，并對通訊進行單獨測試，因此我們提供了Service組件，來為通訊部分進行規范，便于代碼的可讀性和可測試性。

MVVM.Model

Model 是用來維護處理服務器返回的和我們要提交的數據的管理。他是在 JSON 數據之上進行了封裝提供對數據變更等事件的感知能力。一般 Model 主要用于維護一個對象的基本屬性的映射。例如用戶信息、商品詳情等；

MVVM.Collection

Collection 是用來維護一個 Model的集合，它主要用于維護的是一個可以增加、刪除、排序篩選的數據列表。例如訂單列表、商品列表等。這些數據列表都不會在一次訪問中加載完成，用戶需要進行翻頁等操作，這些操作觸發數據更新并附加或更新到 Collection 中。 Model 里面可以使用 JS 對象數組，例如 [1,2,3,4,] 或 [{name:”zhao”} , {name:”wang”}] 。 Model 中的數組主要用于維護一個對象的一些不經常變化的列表屬性，例如衣服對象的尺碼列表、一個電腦的硬盤大小選項等，這些屬性經常不需要動態添加，而是直接一次獲取和展現。

MVVM.ViewModel

ViewModel 是 Model 、 Collection 與HTML（View） 的中間處理機，他首要完成數據到界面、界面到數據的自動化操作。同時也是用戶交互行為事件的處理中心。
因為Service主要是對網絡請求的封裝，Collection主要是一些動態數據的維護，所以我們這里著重來了解Model和ViewModel,我們通過代碼來了解MVVM對象的使用方式：
js代碼：

var model = new (MVVM.Model.extend({//defaults,散列（或函數）用于為模型指定默認屬性。defaults: {"username": "admin","password": "123456a","isLogin": false},//在model創建后執行的方法initialize: function () {console.log("數據初始化");},// 默認情況下validate在save之前調用，也可以在set之前調用。 如果validate返回一個錯誤， save不會繼續，該模型的屬性將不被修改。validate: function (attrs, options) {console.log(attrs, opptions)},//可以理解為對應model的實時計算，比如這里的model里面的username發生了變化，那么對應的<span data-bind="text:add"></span>也會發生變化computeds: {add: {//這里是參數的依賴，也可以使用this.get("username")deps: ["isLogin", "username", "password"],get: function (isLogin, username, password) {return isLogin ? username : password;}}},sync: function (method, model, options) {} }))();var view = new (MVVM.ViewModel.extend({ //el是對應的視圖el: "#test",//model是給視圖綁定modelmodel: model,//主視圖的的各種事件events: {"tap #btn-change": function (ev, param) {model.set("isLogin", !model.get("isLogin"));}} }))();

html代碼：

<div id="test"> <span data-bind="text:add"></span><div class="uinn-at1"><div class="button ub ub-ac bc-text-head ub-pc bc-btn uc-a1" id="btn-change">切換</div></div> </div>

總結

以上是生活随笔為你收集整理的AppCan MVVM框架简单介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。