浅析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 相关文章推荐
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
JS保留两位小数 四舍五入函数的小例子
Nov 20 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
微信公众号 客服接口的开发实例详解
Sep 28 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
简单谈谈原生js的math对象
Jun 27 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
简单了解vue.js数组的常用操作
Jun 17 Javascript
JS实现提示效果弹出及延迟隐藏的功能
Aug 26 Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php curl选项列表(超详细)
2013/07/01 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
php 常用的系统函数
2017/02/07 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
Laravel 实现在Blade模版中使用全局变量代替路径的例子
2019/10/22 PHP
JavaScript 实现模态对话框 源代码大全
2009/05/02 Javascript
基于JQuery的列表拖动排序实现代码
2013/10/01 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
使用Sticker.js实现贴纸效果
2015/01/28 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
将angular.js项目整合到.net mvc中的方法详解
2017/06/29 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
从0到1搭建element后台框架优化篇(打包优化)
2019/05/12 Javascript
jQuery操作attr、prop、val()/text()/html()、class属性
2019/05/23 jQuery
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
opencv3/C++图像像素操作详解
2019/12/10 Python
python获取网络图片方法及整理过程详解
2019/12/20 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
Django xadmin安装及使用详解
2020/10/26 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
悬挂训练绳:TRX
2017/12/14 全球购物
库房主管岗位职责
2013/12/31 职场文书
中国梦的演讲稿
2014/01/08 职场文书
旅游项目开发策划书
2014/01/18 职场文书
动员大会主持词
2014/03/20 职场文书
原生JS中应该禁止出现的写法
2021/05/05 Javascript