demonstrateResourceLoading

演示动态加载各种类型的资源（脚本、样式、图片、iframe），支持超时和错误处理。

前置依赖

依赖参数

参数名	类型	说明
deps.createElement	Document['createElement']	创建 HTML 元素
deps.appendChild	(element: HTMLElement) => void	将元素添加到 DOM
deps.setTimeout	typeof setTimeout	设置定时器，用于超时控制
deps.error	Console['error']	错误日志函数

环境要求

• 浏览器环境: 使用 DOM API 创建和操作 HTML 元素

// 浏览器环境
const deps = {
  createElement: document.createElement.bind(document),
  appendChild: (el) => document.head.appendChild(el),
  setTimeout: window.setTimeout,
  error: console.error
}

函数签名

function demonstrateResourceLoading(
  deps: ResourceLoadingDeps
): Promise<void>

type ResourceType = 'script' | 'style' | 'image' | 'iframe'
type ScriptLoadMode = 'normal' | 'async' | 'defer' | 'module'

interface ResourceLoadingDeps {
  createElement: Document['createElement']
  appendChild: (element: HTMLElement) => void
  setTimeout: typeof setTimeout
  error: Console['error']
}

参数

参数名	类型	必填	说明
deps	ResourceLoadingDeps	是	依赖注入对象

返回值

类型	说明
Promise<void>	Promise，在所有资源加载完成或失败后 resolve

工作原理

1. 创建资源元素：

   • Script: 创建 <script> 元素，支持 normal/async/defer/module 模式
   • Style: 创建 <link rel="stylesheet"> 元素
   • Image: 创建 <img> 元素
   • Iframe: 创建 <iframe> 元素

2. 设置资源属性：

   • 设置 src 或 href 属性
   • 为 script 设置 async、defer 或 type="module" 属性

3. 监听加载事件：

   • 监听 load 事件（加载成功）
   • 监听 error 事件（加载失败）
   • 设置超时定时器（默认 10 秒）

4. 添加到 DOM：

   • 将元素添加到指定的父元素（通常是 document.head）
   • 添加后开始加载资源

5. 处理结果：

   • 加载成功：清除定时器，Promise resolve
   • 加载失败或超时：清除定时器，输出错误日志，Promise reject

函数用于演示和测试资源动态加载功能，可用于教学或调试场景。