使用es6封装一个模块化异步引用组件

// AsyncComponentLoader.js class AsyncComponentLoader { constructor() { // 缓存已加载的组件 this.components = new Map(); // 存储加载中的组件Promise，防止重复加载 this.loadingPromises = new Map(); }

/**

• 异步加载组件
• @param {string} componentName - 组件名称，用于缓存
• @param {Function} loader - 加载函数，应返回一个Promise
• @returns {Promise} - 返回组件的Promise */ async loadComponent(componentName, loader) { // 如果组件已缓存，直接返回 if (this.components.has(componentName)) { return this.components.get(componentName); }

// 如果正在正在加载，返回已存在的Promise
if (this.loadingPromises.has(componentName)) {
  return this.loadingPromises.get(componentName);
}

try {
  // 存储加载Promise，防止重复加载
  const loadPromise = loader();
  this.loadingPromises.set(componentName, loadPromise);

  // 等待加载完成
  const component = await loadPromise;
  
  // 缓存组件
  this.components.set(componentName, component);
  
  // 移除加载状态
  this.loadingPromises.delete(componentName);
  
  return component;
} catch (error) {
  // 加载失败时清理状态
  this.loadingPromises.delete(componentName);
  console.error(`Failed to load component ${componentName}:`, error);
  throw error; // 允许调用者处理错误
}

}

/**

• 检查组件是否已加载
• @param {string} componentName - 组件名称
• @returns {boolean} - 是否已加载 */ isComponentLoaded(componentName) { return this.components.has(componentName); }

/**

• 获取已加载的组件
• @param {string} componentName - 组件名称
• @returns {any} - 组件实例或undefined */ getComponent(componentName) { return this.components.get(componentName); }

/**

• 清除组件缓存
• @param {string} [componentName] - 可选，指定组件名称，不指定则清除所有 */ clearCache(componentName) { if (componentName) { this.components.delete(componentName); } else { this.components.clear(); } } }

// 创建单例实例 export const componentLoader = new AsyncComponentLoader();

// 工具函数：动态导入组件的简化接口 export const loadComponent = (componentName, importFunc) => { return componentLoader.loadComponent(componentName, importFunc); };

// 导出类供扩展使用 export default AsyncComponentLoader;