Object.defineProperty 与数据绑定的简单实现

  对象是一个属性集合,对象的基本特征是属性名(name)和属性值(value)。ES5 增加了属性描述符,包括数据属性描述符(configurable enumerable writable value)和存取描述符(configurable enumerable get set)。两类描述符中的configurable和enumerable作用写法都一样。

  通常用 Object.defineProperty / Object.defineProperties 来定义属性,不过只能定义数据属性描述符或者存取描述符中的一种,而不能同时定义两个,如:不能既定义value,又定义get/set方法。通过设置对象的setter,就可以根据数据的变化触发DOM的更新,实现简单的数据绑定。

数据属性描述符

Object.defineProperty 与数据绑定的简单实现

var person = {
name: "Jack"
} /** 等价于如下定义方法 **/
var person = {};
Object.defineProperty(person, "name", {
value: "Jack",
writable: true, //为true时,该属性才能被“=”重新赋值,默认为false
enumerable: true, //为true时,该属性才能被for in枚举,默认为false
configurable: true //为true时,该属性才能被删除和修改描述符,默认为false
})

存取描述符

  set是给属性提供 setter 的方法,即给对象属性设置值时调用的函数,接受唯一参数,并将该参数的新值分配给该属性。

  get是给属性提供 getter 的方法,即访问对象属性时调用的函数,返回值就是当前属性的值。

  当使用了getter或setter方法,就不允许使用writable和value这两个属性。

Object.defineProperty 与数据绑定的简单实现

var person = {};
Object.defineProperty(person, "name", {
get: function() {
console.log("do get");
return "Hello " + this.value
},
set: function(newValue) {
console.log("do set");
this.value = "Mr " + newValue;
}
}) person.name = "Jone"; // do set,实际设置的值变成"Mr Jone" person.name // do get,实际得到"Hello Mr Jone"

数据绑定实例

  假设下面的p显示的文本要与js中person的name绑定,要求name变化时,p的文本自动变化。

 <p id="person">show person name</p>
var person = {};
var dom = document.getElementById("person");
Object.defineProperty(person, "name", {
get: function() {
return this.value;
},
set: function(newValue) {
dom.innerHTML = newValue;
this.value = newValue;
}
}) person.name = "Jone";
setTimeout(function(){
person.name = "Jack"
},2000)

  执行代码,p首先显示Jone,2秒后自动变成Jack。

上一篇:curl的POST与GET方法


下一篇:session 保存在指定的数据表,cookie设置