浅析js中mvvm模式实现的原理


Posted in Javascript onOctober 06, 2018

以Vue.js框架为例子,使用的mvvm模式

浅析js中mvvm模式实现的原理

view指的是页面的html和css构成的视图。

model指的是从后端取到的数据模型

viewmodel 指的是前端开发人员组织生成和维护的视图数据层。这一层包含的是视图行为和数据。

视图行为指的是如页面加载进来时请求什么,将指定的数据放到指定的元素上,点击某个元素触发某事件。当viewmodel处理好后则会将对应的数据展现到view层。

MVVM模式的优点在于当view和viewmodel的双向绑定,当数据改变后不需要改修改DOM结构。

例如原生js实现一个input的值绑定另一个div的文本,首先需要监听input事件,每次改变触发一次div节点的文本子节点进行修改。使用了MVVM模式则可以自动检测到数据的改变从而修改div文本

mvvm的实现原理:利用Object.defineProperty(),该方法有get、set两个属性方法,从而获取对象属性的值,给对象属性重新赋值

//定义一个对象

let obj = {}

Object.defineProperty(obj,'txt'{

  //obj.txt属性赋值方法,同时为input、p文本赋同一个值

  set(val){

    document.getElementById('input').value = val

    document.getElementById('output').innerHTML = val

  },

  //获取txt属性的方法

  get(){

    return obj;

  }

})

//监听事件 触发的时候会给obj.txt重新赋值,从而实现双向绑定

 document.addEventListener('keyup',(e)=>{

  obj.txt = e.target.value;

 })
Javascript 相关文章推荐
ExtJs grid行 右键菜单的两种方法
Jun 19 Javascript
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
浅谈document.write()输出样式
May 07 Javascript
JavaScript动态创建div等元素实例讲解
Jan 06 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
工厂模式在JS中的实践
Jan 18 Javascript
Vue.js单向绑定和双向绑定实例分析
Aug 14 Javascript
Vue中props的详解
May 16 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
Javascript webpack动态import
Apr 19 Javascript
js for终止循环 跳出多层循环
Oct 04 #Javascript
iView-admin 动态路由问题的解决方法
Oct 03 #Javascript
Angular resolve基础用法详解
Oct 03 #Javascript
解决angularjs service中依赖注入$scope报错的问题
Oct 02 #Javascript
angular.js实现列表orderby排序的方法
Oct 02 #Javascript
Angularjs实现数组随机排序的方法
Oct 02 #Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 #Javascript
You might like
PHP读取MySQL数据代码
2008/06/05 PHP
PHP查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
Yii2实现增删改查后留在当前页的方法详解
2017/01/13 PHP
thinkPHP5.0框架简单配置作用域的方法
2017/03/17 PHP
用js获取电脑信息(是使用与IE浏览器)
2013/01/15 Javascript
IE下双击checkbox反应延迟问题的解决方法
2014/03/27 Javascript
jQuery过滤选择器:not()方法使用介绍
2014/04/20 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
Vue.js实战之组件之间的数据传递
2017/04/01 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
vue计算属性computed的使用方法示例
2019/03/13 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
element-ui如何防止重复提交的方法步骤
2019/12/09 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
Python制作数据导入导出工具
2015/07/31 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python生成密码库功能示例
2017/05/23 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
Python求解正态分布置信区间教程
2019/11/20 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
竞选劳动委员演讲稿
2014/04/28 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
2014年副班长工作总结
2014/12/10 职场文书
2016年寒假家长评语
2015/10/10 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python