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 入口&创建

基本项目结构:

image.png

入口: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可能被触发的形式:

• 下标索引
• 原生方法的副作用:
  1. 改变length触发set
  2. 内部也会有下标索引的改变
• 额外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 ] ]