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 相关文章推荐
javascript中的对象和数组的应用技巧
Jan 07 Javascript
javascript显示隐藏层比较不错的方法分析
Sep 30 Javascript
javascript 表单验证常见正则
Sep 28 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
Apr 03 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
vue中activated的用法
Jan 03 Vue.js
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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
ajax php 实现写入数据库
2009/09/02 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
PHP设计模式(八)装饰器模式Decorator实例详解【结构型】
2020/05/02 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
javascript实现的一个带下拉框功能的文本框
2014/05/08 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
Javascript中常见的逻辑题和解决方法
2016/09/17 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
2016/11/25 Javascript
JS实现给对象动态添加属性的方法
2017/01/05 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
将RGB值转换为灰度值的简单算法
2019/10/09 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
python采集百度百科的方法
2015/06/05 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
Python基础教程之异常详解
2019/01/10 Python
python实现飞机大战游戏
2020/10/26 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
企业车辆管理制度
2014/01/24 职场文书
四议两公开实施方案
2014/03/28 职场文书
工作失职检讨书范文
2015/05/05 职场文书
比赛主持人开场白
2015/05/29 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
Python学习之包与模块详解
2022/03/19 Python