AppCan MVVM框架简单介绍

版权声明:本文为博主原创或转载文章,转载请注明出处。 https://blog.csdn.net/u010730897/article/details/56487388

相信熟悉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>  
展开阅读全文

没有更多推荐了,返回首页