应用场景:
在写前端或 Node.JS 项目的过程中, 可能会遇到一种需求, 例如从数据库中读取一组数据缓存到本地客户端通常是 JSON 数组, 需要对该组数据的状态进行动态监控, 一般来说状态的更改不外乎 "增, 删, 改", 让该组数据可以像其他 dom 元素一样可以实现事件驱动触发对应自定义函数的目的.
我们可以创建一个可观察数组, 此特定实现将数组复制到一个新的 ObservedArray 对象中, 并通过 JavaScript 的 Object.defineProperty 方法自定义 ObservedArray 的 push(),pop(),shift(),unshift(),slice() 和 splice() 方法以及自定义索引访问器.
类定义概述
ObservedArray 定义了三个事件对象, 以下使用 es6 以后推荐的类声明来实现 ObservedArray
其中 inserted 对应 "增加" 的状态;
removed 对应 "删除" 状态;
itemset 对应 "修改" 的状态
prototype() 方法中主要是封装上述所说的 Object.defineProperty 的具体现实
构造函数实现细节
defineIndexProperty 方法用于实现使用类似数组下标的 ObservedArray 对象访问, 例如 myArr[0]='a';myArr[1]; 等...
index 访问器的是实现
addEventListener 的现实
让 ObservedArray 可以象其他 DOM 一样进行事件监听
removeEventListener 的现实细节
当 ObservedArray 不再参与运行时候, 将其对应的处理器函数从事件队列中剔除
push 的现实细节
push 方法会触发 inserted 事件
pop 的现实细节
pop 方法会触发 removed 事件
unshift 的现实细节
unshift 方法会触发 itemset 和 inserted 事件
shift 的现实细节
shift 方法会触发 removed 事件
splice 的现实细节
splice 方法会触发 removed 和 inserted 事件
length 属性的现实细节
length 属性现实类似于 Array 对象访问
测试代码
运行实例 - 进行事件绑定
测试运行
测试代码
具体资料参考:
https://developer.mozilla.org/en-US/docs/web/JavaScript/Reference/Global_Objects/Object/defineProperty
来源: http://www.jianshu.com/p/761a468dc580