本文介绍一种无需修改 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 形式提供且需要...时使用。
立即学习“Java免费学习笔记（深入）”；
- 确保
ScriptList.js本身通过<script src="ScriptList.js"></script>在 HTML 中尽早加载（建议放在内或前），否则动态脚本可能延迟触发； - 所有被加载的 JS 文件（如
Orange.js）必须是可直接执行的模块（无export/import，或已通过构建工具转译为 IIFE）；若使用 ES 模块，需改用type="module"并调整加载逻辑； - 避免在
include()中使用未声明的变量或依赖其他尚未加载的脚本——执行顺序依赖defer的天然保障，但逻辑耦合仍需开发者自行管理。
最终，你的 HTML 保持简洁干净：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TITLE HERE</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="ScriptList"></div> <!-- 动态脚本入口 --> <script src="ScriptList.js"></script> </body> </html>
无需 window.onload 包裹调用——因为 ScriptList.js 本身即为启动器，其中的 include() 调用会在该文件解析完成时立即执行。如需等待 DOM 就绪后再加载（例如依赖 #ScriptList 元素），可包裹在 DOMContentLoaded 中，但本场景通常无需此层额外控制。
