基本语法: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...


DraWarrior
14 声望1 粉丝

学生一枚


引用和评论

0 条评论