基本语法:Object.defineProperty(obj, prop, descriptor)
obj是需要在它上面定义参数prop的对象,prop是需要定义或修改的属性,descriptor为参数配置
在此,不过多了解它其他的功能,需要了解请查看:MDN https://developer.mozilla.org...
Object.defineProperty是es5的新特性,他有一个特别实用的应用场景,就是它可以实现数据和视图的绑定,通过改变数据更新页面
栗子
HTML:
<h2></h2>
JS:
var oH2 = document.querySelector('h2');
var obj = {};
var initvalue = 'hello'
// 通过Object.defineProperty方法为该对象的属性定义get与set方法。
Object.defineProperty(obj, 'title', {
// 当属性被获取的时候,返回的值,
get() {
return initvalue;
},
// 当修改属性时,会接收一个修改后的最新的值
set(newValue) {
initvalue = newValue;
//将这个最新的值渲染到页面上
oH2.innerText = newValue;
}
})
// 设置定时器改变数据
setInterval(() => {
let time = new Date()
obj.title = "hi " + time
})
这个栗子,实现了数据和视图的动态绑定,让你的关注点可以集中在数据处理上
剖析Vue原理&实现双向绑定MVVM:https://segmentfault.com/a/11...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。