如何利用 Getter 属性实现前端大资产按需懒加载的延迟计算-js教程-PHP中文网

getter 本身不实现懒加载但适合封装延迟计算逻辑，首次访问时执行耗时操作并缓存结果，后续直接返回；可结合私有字段、weakmap 或 promise 实现多实例隔离与异步共享。

如何利用 getter 属性实现前端大资产按需懒加载的延迟计算

Getter 属性本身不直接实现“懒加载”，但它天然适合封装延迟计算逻辑——当首次访问属性时才执行耗时操作，后续访问直接返回缓存结果，这正是前端大资产（如大型配置、复杂对象树、图表数据、国际化词条等）按需初始化的核心模式。

用 getter 封装一次性初始化逻辑

把高开销的创建/解析过程写在 getter 内部，配合私有字段缓存结果。首次读取触发计算，之后读取直接返回缓存值，避免重复执行。

适用于：解析大型 JSON 配置、构建深层嵌套的默认对象、生成不可变数据快照
关键点：缓存变量必须是实例私有（如 #configData 或 _cachedChartOptions），不能挂到原型上

示例：

class AssetManager {
  constructor(rawConfig) {
    this._raw = rawConfig;
    this._parsed = null; // 缓存位
  }

  get parsedConfig() {
    if (this._parsed === null) {
      console.log('正在解析大型配置…'); // 仅首次执行
      this._parsed = this._heavyParse(this._raw);
    }
    return this._parsed;
  }

  _heavyParse(json) {
    // 模拟耗时解析：深克隆、校验、补全默认值、转换结构…
    return JSON.parse(JSON.stringify(json)); // 简化示意
  }
}

结合 WeakMap 实现多实例独立缓存

当类被频繁实例化（如每个表格组件一个 manager），用 WeakMap 替代实例字段缓存，既保持私有性，又避免内存泄漏（实例销毁后自动清理）。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

适用场景：组件库中可复用的懒加载工具类、每个图表实例独有的一次性数据准备
注意：WeakMap 的 key 必须是对象，不能是原始值；getter 内通过 map.get(this) 获取对应缓存

示例：

const cache = new WeakMap();

class ChartDataLoader {
  constructor(dataUrl) {
    this.url = dataUrl;
  }

  get resolvedData() {
    if (!cache.has(this)) {
      cache.set(this, this._fetchAndProcess());
    }
    return cache.get(this);
  }

  async _fetchAndProcess() {
    const res = await fetch(this.url);
    const json = await res.json();
    return this._enrich(json); // 如添加坐标映射、时间格式化等
  }
}

与 Promise 结合支持异步懒加载

getter 不能直接 await，但可以返回 Promise，并在首次调用时启动异步任务，后续调用复用同一个 Promise（自动实现“请求去重”和“结果共享”）。

适用场景：远程加载图标字体、按需拉取语言包、动态导入模块（配合 import()）
重点：Promise 实例必须缓存，不能每次 getter 都 new 一个，否则失去“懒”和“共享”意义

示例：

class I18nLoader {
  constructor(locale) {
    this.locale = locale;
    this._promise = null;
  }

  get messages() {
    if (!this._promise) {
      this._promise = import(`./locales/${this.locale}.js`)
        .then(module => module.default || module)
        .catch(err => {
          console.warn(`加载 ${this.locale} 语言包失败`, err);
          return {};
        });
    }
    return this._promise; // 返回已缓存的 Promise
  }
}

// 使用时：
const loader = new I18nLoader('zh-CN');
loader.messages.then(msgs => render(msgs)); // 首次触发加载
loader.messages.then(msgs => render(msgs)); // 复用同一 Promise，不重复请求