您的位置：首页 > 移动开发 > Objective-C

利用object.defineProperty实现数据与视图绑定

2017-09-11 20:14 801 查看
　　如今比较火的mvvm框架，例如vue就是利用es5的defineProperty来实现数据与视图绑定的，下面我来介绍一下defineProperty的用法。

var people= {}
Object.defineProperty(people,"name",{
value: 'lin'
})
console.log(people.name);//lin


     可以看到defineProperty的基本用法就是给一个对象添加一个新属性。上面的代码就是给people对象添加了一个属性name，值为lin。

参数

第一个参数:目标对象

第二个参数:需要定义的属性或方法的名字。

第三个参数:目标属性所拥有的特性。

 

第三个参数可以设置以下属性。

value:属性的值

configurable:总开关，一旦为false，不能再设置，value，writable，configurable。

writable:如果为false，属性的值就不能被重写,只能为只读了

enumerable:是否能在for...in循环中遍历出来或在Object.keys中列举出来。

get:当属性(例如第一个例子的name属性)值被读的时候会触发该方法。

set:当属性(例如第一个例子的name属性)被设置新值时会触发该方法，这就是数据驱动视图的关键

注意：不能设置get 和 set的同时设置writable或value，否则会报错。

 

下面是一个简单的例子：

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<textarea></textarea>
<script>
let obj = {};

Object.defineProperty(obj, "key", {
get: function () {
return document.querySelector('textarea').innerHTML;  //当取obj.key属性时，执行该方法，返回的是dom节点的值(这里为textarea的值)
},
set: function (info) {
document.querySelector('textarea').innerHTML = info;  //当设置obj.key属性时，执行该方法，对应修改dom节点的值(这里为textarea的值)

} });

obj.key = "嘻嘻嘻"; //这个赋值操作会触发set方法
</script>
</body>
</html>


 

效果如下：

 



可以看到，我给obj的key属性赋了新值“嘻嘻嘻”之后，dom中的textarea内容也变成了了“嘻嘻嘻”。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航