利用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框架的双向数据绑定使开发效率大大提高:然后在 ...
随机推荐
- Spark源码剖析（六）：Worker原理与源码剖析
上篇文章我们剖析了Master的原理和源码,知道了当Master使用资源分配算法将资源分配完成后,就会给对应的Worker发送启动Driver或者Executor的消息,那么Worker收到这些消息后 ...
- Prism for WPF再探（基于Prism事件的模块间通信）
上篇博文链接 Prism for WPF初探(构建简单的模块化开发框架) 一.简单介绍: 在上一篇博文中初步搭建了Prism框架的各个模块,但那只是搭建了一个空壳,里面的内容基本是空的,在这一篇我将实 ...
- 尤克里里 ukulele 单板 非kaka tom uma
本店冲人气优惠,不搞倒闭之类的事 23寸尤克里里 单板 单板 单板 彩贝镶边演出大气 单板 单板 单板 彩贝镶边演出大气 单板 单板 单板 彩贝镶边演出大气 配件选购40元全套(加棉琴包.金属变调夹. ...
- JavaScript的DOM编程--01--js代码的写入位置
DOM:Document Object Model(文本对象模型) D:文档 – html 文档 或 xml 文档 O:对象 – document 对象的属性和方法 M:模型 DOM 是针对xml(h ...
- Zabbix 单位换算
直接举一例子,然后再举一反三: 如图: 单位B 则基数为1024(倍数) 我性能参数为KB单位,我们则把单位转换成和我们计数器 保持一致的单位即可,一致后,zabbix 后面会自己准换成自己想要的显示 ...
- Python 词云分析周杰伦《晴天》
一.前言满天星辰的夜晚,他们相遇了...夏天的时候,她慢慢的接近他,关心他,为他付出一切:秋天的时候,两个人终於如愿的在一起,分享一切快乐的时光但终究是快乐时光短暂,因为杰伦必须出国深造,两人面临了要 ...
- Ubuntu16.04安装配置sublime text3
1.安装Sublime Text 3 首先添加sublime text 3的仓库: sudo add-apt-repository ppa:webupd8team/sublime-text-3 根据提 ...
- 【Java框架型项目从入门到装逼】第六节 - 用ajax请求后台数据
这一节我们来说一下如何用ajax提交请求? 我们先不讲ajax的原理,还是先以实战为主,看一下这个东西到底怎么用的? form表单: <!-- 采用post表单提交 --> <for ...
- php mysql语句预编译（preparestatement）
预处理语句用于执行多个相同的 SQL 语句,并且执行效率更高. 预处理语句的工作原理如下: 预处理:创建 SQL 语句模板并发送到数据库.预留的值使用参数 "?" 标记 .例如: ...
- File System 之本地文件系统
上一篇文章提到了,最近做一个基于 File System/IndexedDB的应用,上一篇是定额和使用的查询. 因为LocalFileSystem只有chrome支持,有点尴尬,如果按需加载又何来尴尬 ...