如今比较火的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实现数据与视图绑定的更多相关文章

  1. Object.defineproperty实现数据和视图的联动

    Object.defineproperty语法 var o = {}; // 创建一个新对象 // Example of an object property added with definePro ...

  2. Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式？？？

    参考:http://www.cnblogs.com/oceanxing/p/3938443.html https://developer.mozilla.org/zh-CN/docs/Web/Java ...

  3. 利用Object.defineProperty实现Vue数据双向绑定

    body部分很简单,一个输入框和一个展示的div <div> <p>你好,<input id='nickName'></p> <div id=&q ...

  4. vue Object.defineProperty Proxy 数据双向绑定

    Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...

  5. 利用Object.defineProperty 简化 Chrome插件本地存储操作

    通常谷歌插件本地存储写法很别扭☹,如 chrome.storage.sync.get(null,function(data){ //todo console.log(data); });  如果get ...

  6. Vue双向绑定的实现原理系列（一）：Object.defineproperty

    了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...

  7. vue实现双向数据绑定之Object.defineProperty()篇

    前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...

  8. 前端数据双向绑定原理:Object.defineProperty()

    Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...

  9. MVVM双向绑定实现之Object.defineProperty

    随着web应用的发展,直接操作dom的应用已渐行渐远,取而代之的是时下越来越流行的MVVM框架,dom操作几乎绝迹,这里面自然是框架底层封装的结果.MVVM框架的双向数据绑定使开发效率大大提高:然后在 ...

随机推荐

  1. 获取SpringMVC的映射路径

    public String init(HttpServletRequest request, HttpServletResponse response){ List<String> uLi ...

  2. ES6 字符串的扩展

    字符的Unicode表示法 JavaScript允许采用\uXXXX形式表示一公分字符,其中XXXX表示字符的码点. "\u0061" //"a" 但是,这种表 ...

  3. lesson - 15 Linux系统日常管理4

    内容概要:1. rsync 命令格式rsync [OPTION]... SRC  DESTrsync [OPTION]... SRC  [USER@]HOST:DESTrsync [OPTION].. ...

  4. 《Django By Example》Chap 4中出现的 “RelatedObjectDoesNotExist”错误

    models.py

  5. Amazon email system中使用的字体

  6. unity demo之坦克攻击

    先展示一下成果吧,节后第一天上班简直困爆了,所以一定要动下脑子搞点事情. 分析: 1.涉及到的游戏对象有:坦克,摄像机,场景素材(包含灯光),子弹 2.坦克具有的功能:移动,旋转,发射子弹,记录生命值 ...

  7. 用C#实现微信“跳一跳”小游戏的自动跳跃助手

    一.前言: 前段时间微信更新了新版本后,带来的一款H5小游戏“跳一跳”在各朋友圈里又火了起来,类似以前的“打飞机”游戏,这游戏玩法简单,但加上了积分排名功能后,却成了“装逼”的地方,于是很多人花钱花时 ...

  8. MVC实现（简单小例子）

    Here I’ll demonstrate simple Spring MVC framework for building web applications. First thing first. ...

  9. Linux服务管理1-1 课程简介与系统运行级别

  10. 如何把kotlin+spring boot开发的项目部署在tomcat上

    本文只讲部署过程,你首先要保证你的程序能在IDE里跑起来: 先看看你的application.properties中设置的端口号与你服务器上tomcat的端口号是否一致 server.port=80 ...