如何动态加载多个外部 JavaScript 文件-js教程-PHP中文网

如何动态加载多个外部 JavaScript 文件

本文介绍一种无需修改 HTML 即可动态加载多个外部 JS 脚本的方法：通过在独立的 ScriptList.js 中封装 include() 函数，按需引入多个依赖脚本，实现配置与结构分离。

本文介绍一种无需修改 html 即可动态加载多个外部 js 脚本的方法：通过在独立的 `scriptlist.js` 中封装 `include()` 函数，按需引入多个依赖脚本，实现配置与结构分离。

在前端开发中，常需根据业务变化灵活增删第三方或模块化脚本（如 Orange.js、Apple.js、Pear.js）。若将 <script src="..."></script> 标签硬编码在 HTML 中，每次新增脚本都需同步修改页面结构，违背“关注点分离”原则。更优方案是将脚本清单抽象为纯逻辑配置，由 JavaScript 动态注入。

推荐做法是：创建一个轻量级工具函数 include()，用于创建并插入 <script></script> 元素到中，并确保其异步、非阻塞加载：

// ScriptList.js
function include(filePath) {
  const script = document.createElement('script');
  script.src = filePath;
  script.type = 'text/javascript';
  script.defer = true; // 确保执行顺序（按插入顺序），且不阻塞 DOM 解析
  document.head.appendChild(script); // 更语义化，优于 getElementsByTagName('head').item(0)
}

// 按需加载多个脚本（路径可为相对或绝对 URL）
include('Orange.js');
include('Apple.js');
include('Pear.js');
// 后续只需在此处增删，无需触碰 HTML

✅ 关键优势：

✅ 零 HTML 修改：所有脚本路径集中维护在 ScriptList.js，便于版本控制与协作；
✅ 加载可控：defer 属性保障脚本按声明顺序执行，且不会阻塞页面渲染；
✅ 兼容性强：原生 DOM API，无需依赖任何库，支持所有现代浏览器及 IE9+；
✅ 可扩展性好：可轻松增强为支持回调、错误监听、Promise 封装等（例如：include('x.js').then(...)）。

⚠️ 注意事项：

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

确保 ScriptList.js 本身通过 <script src="ScriptList.js"></script> 在 HTML 中尽早加载（建议放在内或前），否则动态脚本可能延迟触发；
所有被加载的 JS 文件（如 Orange.js）必须是可直接执行的模块（无 export/import，或已通过构建工具转译为 IIFE）；若使用 ES 模块，需改用 type="module" 并调整加载逻辑；
避免在 include() 中使用未声明的变量或依赖其他尚未加载的脚本——执行顺序依赖 defer 的天然保障，但逻辑耦合仍需开发者自行管理。

最终，你的 HTML 保持简洁干净：



  <meta charset="UTF-8"><title>TITLE HERE</title><link rel="stylesheet" href="style.css"><div id="ScriptList"></div>
  <!-- 动态脚本入口 -->
  <script src="ScriptList.js"></script>

无需 window.onload 包裹调用——因为 ScriptList.js 本身即为启动器，其中的 include() 调用会在该文件解析完成时立即执行。如需等待 DOM 就绪后再加载（例如依赖 #ScriptList 元素），可包裹在 DOMContentLoaded 中，但本场景通常无需此层额外控制。

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