使用Object.observe 实现数据绑定
16lz
2021-01-22
Object.observe API概述
最近,JavaScript的MVC框架在Web开发届非常盛行。在实现MVC框架的时候,一个非常重要的技术就是数据绑定技术。如果要实现模型与视图的分离,就必须要使用数据绑定技术。但是,MVC框架的原作者对于数据绑定处理实现得并不如人意,因此,Google公司在ECMAScript中封装了一个Object.observe API,专用于实现数据绑定处理(目前将其正式使用在V8中)。
Object.observe API可以被称为一种“可以对任何对象的属性值修改进行监视的事件处理函数”。
在Firefox浏览器中,实现了与之相类似的可以对DOM对象进行观察的Mutation观察器。
目前为止,Object.observe API已经被strawman proposal所承认,被正式使用在V8中。自11月末开始,已经可以在Chrome Canary与开发者通道中对其进行启用。
本文介绍Object.observe API中的基本功能及一些代码示例。
目前为止,Object.observe API中包括如下所示的四个方法:
- Object.observe:为对象指定监视时调用的回调函数
- Object.unobserve:移除监视时调用的回调函数
- Object.deliverChangeRecords:通过回调函数对对象值进行修改
- Object.getNotifier:获取Notifier对象
可以观察到的属性操作包括以下几种:
- new:添加属性
- updated:修改属性值
- reconfigured:修改属性设定
- deleted:删除属性
接下来介绍如何使用Object.observe方法。
目前(2012年12月6日)为止,如果要使用Object.observe API,需要使用Chrome Canary或Chrome Dev Channel(25.0.1337.0 dev-m以上)版本的浏览器,同时在chrome://flags/中启用“启用实验性 JavaScript”选项,如下图所示。
更多相关文章
- MVC jquery。无法获取未定义或空引用的属性“className”的dataT
- 在angularjs中动态添加/删除checked属性到checkbox复选框
- HTML5 数据集属性dataset
- 浏览器如何处理HTML元素上的无效/未指定的属性?
- Javascript学习:案例7--对象属性和方法的遍历、删除、添加.html
- javascript 构造函数中的属性与原型上属性优先级的比较
- 在jQuery中使用css transform属性
- javascript的offset、client、scroll使用方法,相关属性解释原理
- Angularjs指令ng-hide在单元格模板中不对网格数据的更改进行绑定