利用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实现数据与视图绑定的更多相关文章
- Object.defineproperty实现数据和视图的联动
Object.defineproperty语法 var o = {}; // 创建一个新对象 // Example of an object property added with definePro ...
- Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式？？？
参考:http://www.cnblogs.com/oceanxing/p/3938443.html https://developer.mozilla.org/zh-CN/docs/Web/Java ...
- 利用Object.defineProperty实现Vue数据双向绑定
body部分很简单,一个输入框和一个展示的div <div> <p>你好,<input id='nickName'></p> <div id=&q ...
- vue Object.defineProperty Proxy 数据双向绑定
Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...
- 利用Object.defineProperty 简化 Chrome插件本地存储操作
通常谷歌插件本地存储写法很别扭☹,如 chrome.storage.sync.get(null,function(data){ //todo console.log(data); }); 如果get ...
- Vue双向绑定的实现原理系列（一）：Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- vue实现双向数据绑定之Object.defineProperty()篇
前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...
- 前端数据双向绑定原理:Object.defineProperty()
Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...
- MVVM双向绑定实现之Object.defineProperty
随着web应用的发展,直接操作dom的应用已渐行渐远,取而代之的是时下越来越流行的MVVM框架,dom操作几乎绝迹,这里面自然是框架底层封装的结果.MVVM框架的双向数据绑定使开发效率大大提高:然后在 ...
随机推荐
- 转载|chrome developer tool—— 断点调试篇
断点,调试器的功能之一,可以让程序中断在需要的地方,从而方便其分析.也可以在一次调试中设置断点,下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来,极大的方便了操作,同时节省了时 ...
- redis咋么实现分布式锁，redis分布式锁的实现方式，redis做分布式锁 积极正义的少年
前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...
- haslayout知多少
我们都知道浏览器有bug,而IE的bug似乎比大多数浏览器都多.IE的表现与其他浏览器不同的原因之一就是,显示引擎使用一个称为布局(layout)的内部概念. 因为布局是专门针对显示引擎内部工作方 ...
- 启用composer镜像服务
使用composer下载东西,需要FQ时,可使用其镜像服务 安装composer后,命令行执行全局配置 composer config -g repo.packagist composer https ...
- Keras 学习之旅（一）
软件环境(Windows): Visual Studio Anaconda CUDA MinGW-w64 conda install -c anaconda mingw libpython CNTK ...
- Node.js 蚕食计划（一）—— 模块化编程
众所周知,Node.js 的出现造就了全栈工程师,因为它让 JavaScript 的舞台从浏览器扩大到了服务端 而 Node.js 的强大也得益于它庞大的模块库,所以学习 Node.js 第一步还得从 ...
- Vue 爬坑之路（三）—— 使用 vue-router 跳转页面
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...
- Java的按位操作符
本文参考:Java的位操作符 Java的位操作符用来操作整数基本数据类型中的单个"比特"(bit),即代进制位.而我们知道比特就是0和1,那么,位操作就是对这些数据进行基本的操作. ...
- MAC上安装mysql及workbench
下载mysql for mac https://dev.mysql.com/downloads/installer/ 官网下载很慢---百度云:链接: https://pan.baidu.com ...
- python正则详解
正则表达式概述 正则表达式,又称正规表示式.正规表示法.正规表达式.规则表达式.常规表示法(英语:Regular Expression,在代码中常简写为regex.regexp或RE),是计算机科学的 ...