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是给视图绑定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框架简单介绍相关推荐
- Django - Django框架 简单介绍
Django框架 简单介绍 本文地址: http://blog.csdn.net/caroline_wendy/article/details/29172271 1. 介绍 Django是一个开放源码 ...
- soul框架简单介绍与设计模式分析
soul框架简单介绍与设计模式分析 1. 初识 1.1 查看官网文档了解 1.2. 目标: 2. 分析源码 2.1. 网关的实现原理 2.1.1. 跨域请求问题 2.1.2. 网关请求处理 2.1.3 ...
- Rebound动画框架简单介绍
Rebound动画框架简单介绍 Android菜鸟一枚,有不对的地方希望大家指出,谢谢. 最近在接手了一个老项目,发现里面动画框架用的是facebook中的Rebound框架,由于以前没听说过,放假时 ...
- 【修真院Java小课堂】Tiles框架简单介绍
大家好,我是IT修真院上海分院第6期的学员,一枚正直纯洁善良的程序员 今天给大家分享一下,Tiles框架简单介绍 Tiles框架简单介绍 背景介绍 什么是Tiles Tiles 是一种JSP布局框架, ...
- Spring 框架简单介绍
考虑到你可能不熟悉 Spring,我这里对它做下简单介绍.我们常说的 Spring 框架,是指 Spring Framework 基础框架.Spring Framework 是整个 Spring 生态 ...
- 玩转人工智能(3)常用的大数据框架简单介绍
时光不老,我们不散. 讲大数据框架前,简单的介绍下大数据的文化.信息时代人类社会的进步得益于分享和开源.大数据时代属于信息时代的第三代发展阶段(2001年到2011年可以认为是CT行业的黄金期,200 ...
- 朝花夕拾之socket的基本使用以及mina框架简单介绍
工欲善其事,必先利其器,从互联网诞生到现在,基本上所有的程序都是网络程序,很少有单机版的程序了. 而网络编程的本质是两个设备之间的数据交换,当然,在计算机网络中,设备主要指计算机.我们现在进行网络编程 ...
- Dbutil框架简单介绍
Dbutil框架 Dbutil介绍 l commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...
- jQuery框架简单介绍
jQuery框架介绍 1. jQuery框架与javaScript之间的有什么关系? 2. jQuery与原生javaSript对比,有什么优点? 3. jQuery与javaScript之间的区别是 ...
- Tiles框架简单介绍
大家好,今天给大家分享一下,Tiles框架 一.Tiles框架作用简介 我们在写网页的时候,经常会遇见多个网页复用同样的代码,比如CSDN的菜单栏,顶部栏等,如果在每个页面中都复制粘贴,虽然说也可以实 ...
最新文章
- 十年后,这是25个你会习以为常的AI应用场景
- linux coredump配置与调试
- php文件开放下载安全,php实现文件安全下载
- jQuery操作Select2控件
- Jon Wexler and adidas NMD R1 Primeknit Zebra Pack
- 一款全新的基于IntelliJ和ReSharper的跨平台.NET IDE
- irobot擦地机器人故障_33款扫地机器人口碑:售价6350元的戴森口碑垫底,小米、科沃斯谁更好用?...
- 字符串、组合数据类型练习
- OPENSSL introduce itself from baidu
- MFC 创建快捷方式(学习笔记)
- 凝结11年技术实力 弹性计算国内首著发布
- UE4 视差毛发材质
- 机器学习之ID3算法原理
- 神策数据王晓曼:一文详解指标体系的应用与搭建
- 找不到bridge.dll文件
- 单阶段目标检测重要论文总结
- suse linux如何重置密码忘记,SUSE Linux忘记root密码的对策
- Excel基础操作1
- python2和python3可以兼容吗_Python2和Python2和3兼容的方法,用于隐藏
- 百度地图切图工具的应用实例