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

Posted 三十亿少女的梦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了利用object.defineProperty实现数据与视图绑定相关的知识,希望对你有一定的参考价值。

  如今比较火的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内容也变成了了“嘻嘻嘻”。

以上是关于利用object.defineProperty实现数据与视图绑定的主要内容,如果未能解决你的问题,请参考以下文章

defineReactive函数,利用闭包封装Object.defineProperty()

vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单

从Object.definedProperty中看双向数据的绑定

Object.defineProperty的缺陷

Vue源码Object.defineProperty与Proxy

JavaScript使用Object.defineProperty方法实现双数据绑定