MVVM模式中ViewModel和View、Model有什么区别?


Posted in Javascript onJune 19, 2015

Model:很简单,就是业务逻辑相关的数据对象,通常从数据库映射而来,我们可以说是与数据库对应的model。

View:也很简单,就是展现出来的用户界面。

基本上,绝大多数软件所做的工作无非就是从数据存储中读出数据,展现到用户界面上,然后从用户界面接收输入,写入到数据存储里面去。所以,对于数据存储(model)和界面(view)这两层,大家基本没什么异议。但是,如何把model展现到view上,以及如何把数据从view写入到model里,不同的人有不同的意见。

MVC派的看法是,界面上的每个变化都是一个事件,我只需要针对每个事件写一堆代码,来把用户的输入转换成model里的对象就行了,这堆代码可以叫controller。

而MVVM派的看法是,我给view里面的各种控件也定义一个对应的数据对象,这样,只要修改这个数据对象,view里面显示的内容就自动跟着刷新,而在view 里做了任何操作,这个数据对象也跟着自动更新,这样多美。所以:

ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。

至于viewmodel的数据随着view自动刷新,并且同步到model里去,这部分代码可以写成公用的框架,不用程序员自己操心了。

简单的说,ViewModel就是View与Model的连接器,View与Model通过ViewModel实现双向绑定。

Javascript 相关文章推荐
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
alert和confirm功能介绍
May 21 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
AngularJS封装指令方法详解
Dec 12 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
Jun 19 #Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 #Javascript
javascript格式化日期时间方法汇总
Jun 19 #Javascript
JavaScript中数据结构与算法(四):串(BF)
Jun 19 #Javascript
JavaScript中数据结构与算法(三):链表
Jun 19 #Javascript
js结合正则实现国内手机号段校验
Jun 19 #Javascript
JavaScript中数据结构与算法(二):队列
Jun 19 #Javascript
You might like
ftp类(example.php)
2006/10/09 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
php输入数据统一类实例
2015/02/23 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
Centos PHP 扩展Xchche的安装教程
2016/07/09 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
PHP实现SMTP邮件的发送实例
2018/09/27 PHP
javascript用户注册提示效果的简单实例
2013/08/17 Javascript
js中对象的声明方式以及数组的一些用法示例
2013/12/11 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
javascript实现加载xml文件的方法
2015/11/24 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
Python中__name__的使用实例
2015/04/14 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
win10下Python3.6安装、配置以及pip安装包教程
2017/10/01 Python
python自动发送邮件脚本
2018/06/20 Python
python 使用turtule绘制递归图形(螺旋、二叉树、谢尔宾斯基三角形)
2019/05/30 Python
Python列表的深复制和浅复制示例详解
2021/02/12 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
基于MUI框架使用HTML5实现的二维码扫描功能
2018/03/01 HTML / CSS
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
会展中心部门工作职责
2013/11/27 职场文书
高中的职业生涯规划书
2013/12/28 职场文书
工业自动化毕业生自荐信范文
2014/01/04 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
新学期感想
2015/08/10 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript
原生JavaScript实现简单五子棋游戏
2021/06/28 Javascript