浅析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 相关文章推荐
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
JS 自定义函数缺省值的设置方法
May 05 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
Dec 28 Javascript
JavaScript中定义对象原型的两种使用方法
Dec 15 Javascript
vue组件实例解析
Jan 10 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
小程序清理本地缓存的方法
Aug 17 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
May 21 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
常用的php图片处理类(水印、等比缩放、固定高宽)分享
2015/06/19 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
PHP PDOStatement::fetch讲解
2019/01/31 PHP
通过jquery实现tab标签浏览效果
2007/02/20 Javascript
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
JavaScript数组复制详解
2017/02/02 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
浅谈express.js框架中间件(middleware)
2019/04/07 Javascript
重学JS之显示强制类型转换详解
2019/06/30 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
用Python编写一个简单的俄罗斯方块游戏的教程
2015/04/03 Python
python 使用get_argument获取url query参数
2017/04/28 Python
Python动态导入模块的方法实例分析
2018/06/28 Python
使用pandas实现csv/excel sheet互相转换的方法
2018/12/10 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
使用 Python 读取电子表格中的数据实例详解
2020/04/17 Python
Python将二维列表list的数据输出(TXT,Excel)
2020/04/23 Python
python def 定义函数,调用函数方式
2020/06/02 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
EJB3.1都有哪些改进
2012/11/17 面试题
毕业生自荐书模版
2014/01/04 职场文书
我未来的职业规划范文
2014/01/11 职场文书
简历里的自我评价
2014/01/31 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers