浅析js中mvvm模式实现的原理
更新时间：2018年10月06日 10:43:58 投稿：laozhang
在本篇文章中我们给大家分享了关于js中mvvm模式实现的原理的相关知识点内容，有需要的朋友们参考下。
以Vue.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;
})
相关文章
学习js的朋友一定要知道和注意，其实每种语言都有它的命名规则。2009-09-09
Date 对象用于处理日期和时间，Date对象会自动把当前日期和时间保存为其初始值，本文整理了一些，喜欢的朋友可以收藏下2013-11-11
流程控制语句在JS中是至关重要的。JS中的流程控制语句包括if条件判断语句、for循环语句、while循环语句、do……while循环语句、break语句、continue语句和switch语句等7种语句,需要的朋友可以参考下2017-09-09
在Javascript中，function才是Javascript的第一型。当我们写下一段函数时，其实不过是建立了一个function类型的实体。2010-01-01
这篇文章主要介绍了JavaScript中的prototype原型学习指南,包括原型链与原型继承等重要知识,需要的朋友可以参考下2016-05-05
IE不支持getElementsByClassName最终完美解决方案
目前可以这么解决，判断浏览器支不支持这个方法，如果支持就不管；如果不支持，就在document对象里加入getElementsByClassName这个方法,按兴趣的朋友可以了解下2012-12-12
本篇文章小编将为大家介绍，基于dom编程中动态创建与删除元素的使用，有需要的朋友可以参考一下2013-04-04
这篇文章主要介绍了详解JavaScript中Date.UTC()方法的使用,是JS入门学习中的基础知识,需要的朋友可以参考下2015-06-06
javascript cookie用法基础教程(概念,设置,读取及删除)
这篇文章主要介绍了javascript cookie用法,结合实例形式总结分析了javascript中cookie的定义、特点及获取、设置、删除等基本操作技巧,需要的朋友可以参考下2016-09-09
scrollTop属性是什么? 有些情况下,“元素中内容”的高度会超过“元素本身”的高度,2009-06-06
最新评论