[nodeJS技术宅]实现一个可事件驱动的数组对象

应用场景:

在写前端或nodejs项目的过程中,可能会遇到一种需求,例如从数据库中读取一组数据缓存到本地客户端通常是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