本文介绍如何通过点击事件动态加载指定路径的 JS 文件，避免页面初始加载时因大量 标签导致性能下降，适用于管理数百个独立脚本（如 Apple.js、Banana.js 等）的场景。
本文介绍如何通过点击事件动态加载指定路径的 js 文件，避免页面初始加载时因大量 `<script>` 标签导致性能下降，适用于管理数百个独立脚本（如 apple.js、banana.js 等）的场景。</script>
在构建大型前端应用或文档型页面时，若需支持上百个功能模块（每个模块封装在一个独立 .js 文件中），将所有 <script src="..."></script> 静态写入 HTML 会导致首屏加载缓慢、资源冗余、执行阻塞等问题。更优解是采用按需加载（Lazy Loading）策略：页面初始化仅加载核心逻辑，用户点击链接/按钮时，再异步获取并执行对应 JS 文件。
✅ 推荐实现方式：动态创建 <script></script> 元素 + Promise 封装
以下是一个健壮、可复用的 addScript() 工具函数，它返回一个 Promise，确保脚本加载成功或失败均可被准确捕获：
function addScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
script.async = true; // 显式启用异步加载（推荐）
script.addEventListener('load', () => resolve(script));
script.addEventListener('error', () =>
reject(new Error(`Failed to load script: ${src}`))
);
document.head.appendChild(script); // 推荐插入 ，避免执行时机异常
});
}
? 为什么用
document.head？
将<script></script>插入更符合标准加载行为，避免因 DOM 未就绪导致的执行顺序问题；同时async=true可防止阻塞 HTML 解析。
? 在 HTML 中绑定点击事件（无需内联 JS）
修改你的链接结构，使用 data-src 属性声明目标 JS 路径，并移除内联 onclick（提升可维护性与安全性）：
<div id="LinksList"> <a href="#" class="js-loader">? Apple</a> <a href="#" class="js-loader">? Banana</a> <a href="#" class="js-loader">? Cherry</a> </div> <div id="ScriptList"></div>
? 绑定事件并执行动态加载（含错误处理）
在页面加载完成后，为所有 .js-loader 元素统一绑定事件处理器：
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.js-loader').forEach(link => {
link.addEventListener('click', async function(e) {
e.preventDefault(); // 阻止默认跳转行为
const src = this.getAttribute('data-src');
if (!src) return;
try {
await addScript(src);
console.log(`✅ Successfully loaded: ${src}`);
// ✅ 可选：加载成功后更新 UI 或触发模块初始化
const container = document.getElementById('ScriptList');
container.innerHTML += `<p><strong>Loaded:</strong> ${src}</p>`;
} catch (err) {
console.error('❌ Load failed:', err.message);
alert(`Failed to load ${src}: ${err.message}`);
}
});
});
});
⚠️ 重要注意事项
-
同源限制：浏览器会阻止跨域加载本地文件（
file://协议）。若你在桌面直接双击 HTML 打开，Apple.js将因 CORS 被拒绝。✅ 解决方案：使用本地开发服务器（如 VS Code 的 Live Server 插件、npx http-server或 Python 的python -m http.server）。 -
脚本执行上下文：动态加载的 JS 与当前页面共享全局作用域（
window），因此其中定义的变量/函数可直接访问（如Apple.init()），但需确保其导出逻辑不依赖于 DOM 就绪（建议内部包裹document.addEventListener('DOMContentLoaded', ...)）。 -
重复加载防护：同一脚本多次点击会重复插入
<script></script>。如需防重，可在addScript()前检查document.querySelector(script[src="${src}"])是否已存在。 -
路径规范：
data-src值应为相对路径（如./scripts/Apple.js）或绝对路径，确保与 HTML 文件位置关系正确。
✅ 总结
通过动态创建 <script></script> 并配合 Promise 封装，你不仅能显著提升页面初始加载性能，还能灵活管理数百个模块化脚本。结合语义化的 data-* 属性与事件委托，代码清晰、可扩展性强，且完全兼容现代浏览器。只要部署在 HTTP(S) 服务下，即可安全、稳定地运行于生产环境。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
