AppCan MVVM框架简单介绍

相信熟悉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是给视图绑定model
model: 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>