利用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框架的双向数据绑定使开发效率大大提高:然后在 ...
随机推荐
- webpack配置报错：invalid configuration object.webpack has been initialisted using a configuration objcet that does not match thie API schema
最近接收了别人的项目,webpack配置总是报错如下:最后找到了解决办法,在此分享一下: 错误情况: 解决办法: 将package.json里面的colors删除掉即可
- 【http转https】其之三 IIS_URL重写_http重定向到https
IIS_URL重写_http重定向到https 文:铁乐猫 2016年1月14日 IIS7以上支持URL Rewrite这个模块了,所以在我们做好了ssl证书这一块之后, 要对来自http的请求重定向 ...
- 安装spark单机环境
(假定已经装好的hadoop,不管你装没装好,反正我是装好了) 1 下载spark安装包 http://spark.apache.org/downloads.html 下载spark-1.6.1-bi ...
- springMVC(6)---处理模型数据
springMVC(6)---处理模型数据 之前一篇博客,写个怎么获取前段数据:springMVC(2)---获取前段数据,这篇文章写怎么从后端往前端传入数据. 模型数据类型 ...
- Sql 关于 查俩个表 第二个表用到第一个表的某一个数据
今天在写程序的时候遇到一个问题 有一个这个需求 select top 1 Name,[Address] from UserInfo;select * from shoppingAddress whe ...
- ES6解构之复杂数据
今天在写代码的是否,碰到如下的数据,我要取值 fvkey,fn,url. { , , "fl":Object{...}, , "ip":"106.39 ...
- python 命令
pip list 可以查看已经安装的插件 pip show name 可以查看插件的信息(如:pip show selenium) pip install selenium==[version num ...
- 【转】python qt(pyqt)的文件打开、文件保存、文件夹选择对话框
import PyQt4.QtCore,PyQt4.QtGui # 获取文件路径对话框 file_name = QFileDialog.getOpenFileName(self,"open ...
- ionic serve 突然报错 node-sass
正常打开项目,并开启浏览器测试模式: 执行命令: ionic serve: 结果报错: 解决方法: 你可以按照 里面的提示: 直接执行命令: npm rebuild node-sass 然后再重新执 ...
- 解决html文件的DropFileName = "svchost.exe"木马
首先表示强烈谴责,没事写出这种木马来.导致开发者把时间花在解决这种问题上. 这种木马会在你全盘的html文件的最底部生成一堆vbscript代码,导致html文件变得很大.大概213kb.可以看出他就 ...