loadAllNeedCDNs

描述

批量加载CDN资源。该函数会并行加载多个CDN资源，支持JavaScript文件和CSS文件。所有资源加载完成后返回Promise，如果任何资源加载失败则抛出异常。支持超时控制、重试机制和错误处理。该函数仅支持浏览器环境。

语法

loadAllNeedCDNs(
  resources: Record<string, string>,
  options?: {
    timeout?: number;
    retryCount?: number;
    retryDelay?: number;
  }
): Promise<void>

参数

• resources (Record<string, string>): 要加载的资源配置对象
  • 键: 资源名称（用于错误信息标识）
  • 值: 资源URL（支持.js和.css文件）
• options (object, 可选): 加载选项
  • timeout (number, 可选): 超时时间（毫秒），默认30000ms
  • retryCount (number, 可选): 重试次数，默认3次
  • retryDelay (number, 可选): 重试延迟（毫秒），默认1000ms

返回值

• Promise<void>: 所有资源加载完成

异常

• Error: 当在非浏览器环境下调用时抛出
• TypeError: 当参数验证失败时抛出
• ResourceLoadError: 当资源加载失败时抛出
  • type: 错误类型（'timeout' | 'load' | 'type'）
  • resourceName: 资源名称
  • url: 资源URL

示例

基本用法

import { loadAllNeedCDNs } from '@fu/matrix';

const resources = {
  F10Utils: '//s.thsi.cn/cb?cd/website-thsc-f10-utils/1.4.37/thsc-f10-utils.js',
  API: '//s.thsi.cn/cb?cd/b2cweb-fe-common-resource-pod/js/cefApi/1.5.6/cefApi.min.js',
};

try {
  await loadAllNeedCDNs(resources);
  console.log('所有资源加载完成');
} catch (error) {
  console.error('资源加载失败:', error);
}

混合资源类型

import { loadAllNeedCDNs } from '@fu/matrix';

const resources = {
  jQuery: 'https://code.jquery.com/jquery-3.6.0.min.js',
  Bootstrap: 'https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css',
  CustomScript: '//example.com/custom.js',
  CustomStyle: '//example.com/custom.css'
};

await loadAllNeedCDNs(resources);

自定义配置

import { loadAllNeedCDNs } from '@fu/matrix';

const resources = {
  F10Utils: '//s.thsi.cn/cb?cd/website-thsc-f10-utils/1.4.37/thsc-f10-utils.js',
  API: '//s.thsi.cn/cb?cd/b2cweb-fe-common-resource-pod/js/cefApi/1.5.6/cefApi.min.js',
};

// 自定义超时和重试配置
await loadAllNeedCDNs(resources, {
  timeout: 15000,    // 15秒超时
  retryCount: 2,     // 重试2次
  retryDelay: 500    // 500ms重试延迟
});

错误处理

import { loadAllNeedCDNs } from '@fu/matrix';

const resources = {
  F10Utils: '//s.thsi.cn/cb?cd/website-thsc-f10-utils/1.4.37/thsc-f10-utils.js',
  API: '//s.thsi.cn/cb?cd/b2cweb-fe-common-resource-pod/js/cefApi/1.5.6/cefApi.min.js',
};

try {
  await loadAllNeedCDNs(resources, { retryCount: 1 });
  console.log('资源加载成功');
} catch (error) {
  if (error.name === 'ResourceLoadError') {
    console.error('资源加载失败:', {
      name: error.resourceName,
      url: error.url,
      type: error.type
    });
    
    if (error.type === 'timeout') {
      console.error('加载超时，请检查网络连接');
    } else if (error.type === 'load') {
      console.error('资源加载失败，请检查URL是否正确');
    } else if (error.type === 'type') {
      console.error('不支持的资源类型');
    }
  } else {
    console.error('未知错误:', error);
  }
}

实际应用场景

import { loadAllNeedCDNs } from '@fu/matrix';

// 动态加载页面所需资源
async function loadPageResources(pageType: string) {
  const baseResources = {
    jQuery: 'https://code.jquery.com/jquery-3.6.0.min.js',
    Utils: '//s.thsi.cn/cb?cd/website-thsc-f10-utils/1.4.37/thsc-f10-utils.js'
  };

  const pageSpecificResources = {
    chart: {
      ChartJS: 'https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js'
    },
    table: {
      DataTables: 'https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js',
      DataTablesCSS: 'https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css'
    }
  };

  try {
    // 加载基础资源
    await loadAllNeedCDNs(baseResources);
    
    // 加载页面特定资源
    if (pageSpecificResources[pageType]) {
      await loadAllNeedCDNs(pageSpecificResources[pageType]);
    }
    
    console.log(`${pageType}页面资源加载完成`);
  } catch (error) {
    console.error('页面资源加载失败:', error);
    // 显示错误提示或使用备用方案
  }
}

// 使用示例
loadPageResources('chart');

特性

支持的资源类型

• JavaScript文件: .js 扩展名或URL中包含 .js 或 .js?
• CSS文件: .css 扩展名或URL中包含 .css 或 .css?
• 大小写不敏感: 支持 .JS、.CSS 等大写扩展名

加载机制

• 并行加载: 所有资源同时加载，提高效率
• 异步加载: JavaScript文件设置为 async 属性
• DOM注入: 自动将资源注入到 document.head

错误处理

• 环境检查: 自动检测是否在浏览器环境中
• 参数验证: 完整的输入参数验证
• 重试机制: 支持配置重试次数和延迟
• 超时控制: 可配置超时时间
• 详细错误信息: 包含资源名称、URL和错误类型的错误信息
• 控制台警告: 重试时输出警告信息

性能优化

• 并行加载: 多个资源同时加载
• 异步执行: 不阻塞主线程
• 内存管理: 自动清理超时定时器
• 代码重构: 提取辅助函数，降低复杂度

默认配置

• 超时时间: 30000ms (30秒)
• 重试次数: 3次
• 重试延迟: 1000ms (1秒)

兼容性

• 浏览器支持: ✅ 所有现代浏览器
• Node.js 支持: ❌ 仅支持浏览器环境
• TypeScript 支持: ✅ 完整类型定义

注意事项

1. 仅支持浏览器环境，Node.js环境下会抛出错误
2. 资源URL必须是有效的JavaScript或CSS文件
3. 不支持其他类型的资源（如图片、字体等）
4. 重试机制会增加网络请求次数
5. 超时时间过短可能导致正常资源加载失败
6. 资源类型检测区分大小写，但URL会被转换为小写进行检测

错误类型说明

ResourceLoadError

当资源加载失败时抛出的自定义错误类，包含以下属性：

• name: 错误名称，固定为 'ResourceLoadError'
• message: 错误消息
• resourceName: 资源名称
• url: 资源URL
• type: 错误类型
  • 'timeout': 加载超时
  • 'load': 加载失败
  • 'type': 不支持的资源类型

相关方法

• getCookie - 获取Cookie值
• getUrlParam - 获取URL参数

版本历史

• v1.0.0: 初始版本
• v1.0.1: 代码重构，添加环境检查，改进错误处理