利用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框架的双向数据绑定使开发效率大大提高:然后在 ...
随机推荐
- 深入理解用户权限rwx
其实在UNIX的实现中,文件权限用12个二进制位表示,如果该位置上的值是1,表示有相应的权限,如果是0则没有相应权限第11位为SUID位,第10位为SGID位,第9位为sticky位,第8-0位对应于 ...
- 小白的Python之路 day4 软件目录结构规范
软件目录结构规范 为什么要设计好目录结构? "设计项目目录结构",就和"代码编码风格"一样,属于个人风格问题.对于这种风格上的规范,一直都存在两种态度: 一类同 ...
- jquery提供的插件无法删除cookie的解决办法
之前使用jquery的cookie插件提供的 $.cookie("key",null)方法删除cookie,结果发现代码中的cookie一直无法删除,导致后面的种种问题. 经过各种 ...
- Pyhon学习_04_字典、集合
字典.集合两种基本类型都是通过映射的方式访问. 字典 python中的字典和perl中的哈希是很相似的,包括其重要的几条属性: 1. 键值必须是唯一的 2. 键值必须是可哈希的,也就是键值不能够是可变 ...
- python calendar（日历）模块
内置函数month() #!/usr/bin/python import calendar print calendar.month(2017,12) 输出: December 2017 Mo Tu ...
- 移动端H5页面惯性滑动监听
移动端H5页面惯性滑动监听 在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑 ...
- Elasticsearch Head插件实践
简介 Elasticsearch是一个基于Lucene的搜索服务器.它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口.Elasticsearch是用Java开发的,并作为Ap ...
- DNN论文分享 - Item2vec: Neural Item Embedding for Collaborative Filtering
前置点评: 这篇文章比较朴素,创新性不高,基本是参照了google的word2vec方法,应用到推荐场景的i2i相似度计算中,但实际效果看还有有提升的.主要做法是把item视为word,用户的行为序列 ...
- Eclipse 配置scala开发环境（windows）
1. scala2.10.4.msi 安装 2. 配置SCALA_HOME 及path路径 SCALA_HOME C:\Program Files (x86)\scala PATH :%SCALA_H ...
- iOS开发的另类神器：libimobiledevice开源包【类似android adb 方便获取iOS设备信息】
简介 libimobiledevice又称libiphone,是一个开源包,可以让Linux支持连接iPhone/iPod Touch等iOS设备.由于苹果官方并不支持Linux系统,但是Linux上 ...