JavaScript 怎么动态加载外部的 JavaScript 脚本文件-js教程-PHP中文网

javascript动态加载脚本的核心是创建script元素并插入文档，支持原生dom方法和import()函数两种方式：前者兼容性好但需手动处理重复加载，后者专为es模块设计且自动去重。

javascript 怎么动态加载外部的 javascript 脚本文件

JavaScript 动态加载外部脚本，核心是创建 <script></script> 元素并插入到文档中。这种方式不阻塞页面渲染，适合按需加载、代码分割或运行时决定依赖的场景。

用原生 DOM 方法动态插入 script 标签

这是最基础也最通用的方式，兼容所有现代浏览器，包括旧版 IE（需注意 IE 的 onreadystatechange 事件）。

创建 script 元素，设置 src 属性指向目标 JS 文件
监听 load（成功）和 error（失败）事件，确保可感知加载结果
将 script 插入到或中（推荐，避免影响 body 渲染顺序）

示例：

function loadScript(src) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = src;
    script.async = true; // 默认为 true，非阻塞加载

    script.onload = () => resolve(script);
    script.onerror = () => reject(new Error(`Failed to load ${src}`));

    document.head.appendChild(script);
  });
}

// 使用
loadScript('/path/to/module.js')
  .then(() => console.log('Loaded'))
  .catch(err => console.error(err));

用 import() 函数动态导入 ES 模块

ES2020 起支持顶层 import()（动态导入），返回 Promise，专为模块化设计，天然支持 tree-shaking 和异步依赖。

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

只能用于 ES 模块（type="module" 的脚本或本地模块文件）
路径可以是字符串变量，支持拼接、条件判断，比静态 import 灵活得多
自动处理模块依赖、重复加载去重（同一 URL 只执行一次）

示例：

// 加载后可直接使用导出的成员
import('/path/to/utils.js')
  .then(module => {
    module.helper();
  })
  .catch(err => console.error(err));

// 也可配合 await 使用（在 async 函数内）
async function init() {
  const { debounce } = await import('./debounce.js');
  const debounced = debounce(() => console.log('done'), 300);
}

注意事项与常见问题

动态加载不是“扔进去就完事”，几个关键点容易踩坑：

CORS 限制：如果脚本跨域，服务端必须返回 Access-Control-Allow-Origin 头，否则会静默失败（error 事件仍会触发）
执行时机：动态 script 默认异步执行，但其内部代码仍是同步执行的；多个动态 script 之间不保证执行顺序（除非链式加载或用 import()）
重复加载：原生方式不会自动去重，多次调用可能重复执行；可用全局标记或 Map 缓存已加载 URL 来避免
调试困难：动态加载的脚本在开发者工具中可能显示为匿名或临时 URL，建议加 script.dataset.id = 'xxx' 方便识别

简单封装一个可靠加载器

结合缓存 + Promise + 错误提示，日常够用：

const loadedScripts = new Set();

function loadJS(src) {
  if (loadedScripts.has(src)) {
    return Promise.resolve();
  }

  return new Promise((resolve, reject) => {
    const script = Object.assign(document.createElement('script'), {
      src,
      async: true,
      onload: () => {
        loadedScripts.add(src);
        resolve();
      },
      onerror: () => reject(new Error(`Script load error: ${src}`))
    });

    document.head.appendChild(script);
  });
}

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南