如何延迟初始化Tabulator网格并统一管理多网格实例

你的问题出在构造函数执行阶段就直接实例化了所有Tabulator对象，当你执行new allGrids()时，this.grid1、this.grid2、this.grid3会立刻被赋值为Tabulator实例，导致所有网格同时初始化，没有实现按需加载的效果。

下面提供两种可行的解决方案：

方案1：使用对象字面量的Getter属性 #

通过定义Getter属性，让网格实例在第一次被访问时才初始化，并且初始化后缓存起来避免重复创建：

const grids = {
  // 按需初始化grid1
  get grid1() {
    // 初始化后将属性转为普通值，避免后续访问重复执行Getter
    Object.defineProperty(this, 'grid1', {
      value: new Tabulator("#grid1", {/* 你的配置项 */}),
      writable: false,
      configurable: false
    });
    return this.grid1;
  },
  // 按需初始化grid2
  get grid2() {
    Object.defineProperty(this, 'grid2', {
      value: new Tabulator("#grid2", {/* 你的配置项 */}),
      writable: false,
      configurable: false
    });
    return this.grid2;
  },
  // 按需初始化grid3
  get grid3() {
    Object.defineProperty(this, 'grid3', {
      value: new Tabulator("#grid3", {/* 你的配置项 */}),
      writable: false,
      configurable: false
    });
    return this.grid3;
  }
};

使用方式和你原逻辑完全一致：

// 第一次访问时初始化grid1，之后直接返回缓存的实例
grids.grid1.setData(yourData);
// 同理，grid2在第一次访问时才初始化
grids.grid2.setData(anotherData);

方案2：使用类的Getter属性 #

如果偏好类的组织方式，可以用类结合Getter实现懒加载：

class AllGrids {
  // 用下划线约定私有属性，存储已初始化的网格实例
  get grid1() {
    if (!this._grid1) {
      this._grid1 = new Tabulator("#grid1", {/* 你的配置项 */});
    }
    return this._grid1;
  }

  get grid2() {
    if (!this._grid2) {
      this._grid2 = new Tabulator("#grid2", {/* 你的配置项 */});
    }
    return this._grid2;
  }

  get grid3() {
    if (!this._grid3) {
      this._grid3 = new Tabulator("#grid3", {/* 你的配置项 */});
    }
    return this._grid3;
  }
}

const grids = new AllGrids();

使用方式同样保持一致：

grids.grid1.setData(yourData);
grids.grid3.setData(thirdData);

核心原理 #

两种方案都是利用Getter属性的延迟执行特性：只有当你访问grids.gridX时，对应的Getter函数才会触发，此时才会创建Tabulator实例；实例创建完成后会被缓存，后续访问直接返回已创建的实例，既实现了按需初始化，又保证了每个网格只被初始化一次。

内容的提问来源于stack exchange，提问作者Grufas