ExArray
继承于JavaScript原生数组(Array)的超集数组。
实现功能:
- 事件系统(提供深度绑定)
- 多维数组的直接创建
- 更多实用的API
part 1 介绍&写在前面
过去开发的过程中你有没有切实感受过,js原生数组好像有点不够强,
比如:
- 不能直接创建二维数组,new Array(2,2)返回的是[2,2]而不是一个2x2的二维数组
- 不能监听数组内部状况，什么时间节点添加/删除/修改了元素？
基于上述，我决定自己手码一个更强力的数组，并且在不改变原生Array.prototype基础上,添加些日常开发常用的api就更好了!
虽然现在已经还在开发中,不过该有的功能都有了
欢迎你来点star - > https://github.com/moushicheng/ExArray
part 2 入口&创建
基本项目结构:
入口:src\index.js
import ExArray from './instance'
export default class Exarr extends ExArray{ //继承只是继承其静态方法罢了
constructor(...config){
super()
return new Proxy(new ExArray(...config), {
get(obj, property) {
// console.log('get : '+property);
return obj[property];
},
set(obj, property, value) {
//再怎么说，SET这玩意检测的范围也太广了...........
let len=obj.length
obj[property] = value;
//拦截器的操作顺序和实际代码顺序相关 能拦截是因为先设置的isMethod=true，再执行的方法
if (obj.isNotMethod && Number.isInteger(property*1)) {
if(obj.length<=len)obj.event.emit("change", property, value, obj);
else{
obj.event.emit("add", property, value, obj);
}
}
return true;
},
});
}
}
用户获取的Exarr,实际上就是一个代理器,他是es6新特性带来的产物,可以检测对象的get和set，我们也以此来检测用户的通过下标索引所触发的ADD或者Change事件，如a[1]=1;会触发set
但这里有个极大的弊端,数组的原生方法也会触发Set,但由于其内部是个黑盒子,他触发set时可能会带来许多不可预期的副作用,所以这里用obj.isNotMethod这个属性来拦截方法的形式触发set
除此之外,额外API也容易触发set,所以为了拦截也必须使用obj.isNotMethod属性。
isNotMethod为ture时，表示此时对象使用下标索引触发的形式,false表示使用方法触发的形式
下面列出了set可能被触发的形式:
- 下标索引
- 原生方法的副作用:
- 改变length触发set
- 内部也会有下标索引的改变
- 额外API [触发形式和原生方法差不多]
框架为了解耦开这两种触发方式下标索引和方法,也采用了两套不同的逻辑,这在之后会进行解释
part 2 ExArray的定义
位置:src\instance.js
import { globalApiMixin, localApiMixin, EventInit, wrapMixin } from "./init";
export default class ExArray extends Array {
constructor(...config) {
super(config.length == 1 ? config[0] : 0);
if (config.length > 1) {
return ExArray.createArr(...config);
}
this.isNotMethod=true;
this.__Ex__='ExArray';
EventInit.call(this);
this.fill(0)
}
}
globalApiMixin(ExArray); //将全局方法混入到ExArray上 实际上就是静态方法
localApiMixin(ExArray); //将局部方法混入到ExArray prototype上 实际上就是通过a.func引用的动态方法
wrapMixin(ExArray); //在Array方法前面混入一个包装器
注意到:
class ExArray extends Array
这就是我为什么说ExArray是Array的超集的原因
ExArray的定义主要采取了一种混入(Mixin)的模式,
静态方法和动态方法的添加方式都很简单，如下:
位置:src\init
function globalApiMixin(em) {
for (const [name, Func] of Object.entries(Methods.globalApi)) {
em[name] = Func; //静态方法 Exarr.func
}
}
function localApiMixin(em) {
for (const [name, Func] of Object.entries(Methods.localApi)) {
em.prototype[name] = Func; //动态方法 new Exarr().func
}
}
包装器有额外的逻辑,这个之后在解释。
最后我们介绍下核心的创建逻辑:
super(config.length == 1 ? config[0] : 0);
if (config.length > 1) {
return ExArray.createArr(...config);
}
参数一位就直接创建对象,如:new Exarr(3) ->直接super返回[0,0,0]
如果参数≥1位,就调用全局api,创建多维数组
位置:src\Methods\globalApi
function createArr(...config) {
//config -> i j 行 列 ..
function action(config, i, curArr) {
let curIndex = config[i];
for (let k = 0; k < curIndex; k++) {
let arr;
if (i == config.length - 1) arr = 0;
else {
arr = new Exarr();
arr.setFN(curArr);
}
curArr.push(arr);
action(config, i + 1, arr);
}
if (i == 0) {
return curArr;
}
}
return action(config, 0, new ExArray());
}
逻辑很简单，就是递归式的创建数组,不想看也没关系,只要知道它有这样的一个输出逻辑就够了
new Exarr(3,3,3)
[
[ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ],
[ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ],
[ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]
]
new Exarr(2,2)
[ [ 0, 0 ], [ 0, 0 ] ]
