如今比较火的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. Vue入门总结

    技术栈:VUE:Vue-router:Vue-resource:Vue-cli: 项目:个人博客vue重构 一.vue-cli脚手架搭建项目结构 全局安装vue-cli: npm install vu ...

  2. java应用的jar包多合一

    之前开发的java程序由于依赖比较多的jar包,启动命令为" java -classpath .:lib/*.jar 主类名",这种启动方式需要指定类路径.入口类名称,并存在jar ...

  3. JVM 运行时的内存分配

    首先我们必须要知道的是 Java 是跨平台的.而它之所以跨平台就是因为 JVM 不是跨平台的.JVM 建立了 Java 程序和操作系统之间的桥梁,JVM 是用 C 语言编写,而 C 语言不具备跨平台的 ...

  4. CHECKDB内部：什么是BlobEater？

    DBCC CHECKDB注意到有关数据文件页面.一旦整个表的所有页(或一组表,如果配料已启用-看到同样的博客文章我上面提到的),所有的事实都聚集在一起,他们都应该相互抵消.当有额外的事实(在索引B树都 ...

  5. Laravel 中实现是否关注

    @if ($user->id !== Auth::user()->id) <div id="follow_form"> @if (Auth::user()- ...

  6. SSH实战OA 11:BBS模块

    <SSH实战OA>系列博客的系统管理.权限管理等内容后面再补上吧,先继续第三个模块:网上交流模块.网上交流主要做两个需求:论坛管理和论坛. BBS的一些基本术语: 板块:也叫做" ...

  7. 浅谈MVC MVP MVVM

    复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用. 它本身很容易理解,但是要讲清楚,它与衍生的 MVP ...

  8. kotlin的方言（语法糖）

    概述 之前介绍了kotlin的快速入门,http://www.cnblogs.com/lizo/p/7231167.html 大多数还是参照java.kotlin中提供了更多更方便的语言特性 这个方言 ...

  9. C盘里的桌面文件移到E盘里了，然后E盘里的文件都显示到桌面上了，怎么将桌面文件还原回C盘

    1 . 直接按Windows键+R,打开"运行"对话框,在输入框中输入"regedit"命令,会打开注册表编辑窗口: 2.打开注册表文件将HKEY_CURREN ...

  10. Pyqt4的对话框 -- 预定义对话框

    QinputDialog提供了一种获取用户单值数据的简介形式. 它接受的数据有字符串.数字.列表中的一项数据 # QInputDialog 输入对话框 # 本示例包含一个按钮和一个行编辑部件.单击按钮 ...