本文介绍如何通过点击事件动态加载本地或远程的 JavaScript 文件，避免页面初始加载时因大量 标签导致性能下降，适用于管理数百个 JS 资源（如 Apple.js、Banana.js 等）的场景。
本文介绍如何通过点击事件动态加载本地或远程的 javascript 文件，避免页面初始加载时因大量 `<script>` 标签导致性能下降，适用于管理数百个 js 资源（如 apple.js、banana.js 等）的场景。</script>
在实际开发中，当需要管理大量独立功能脚本（例如每个水果对应一个 Apple.js、Banana.js），若全部在 HTML 中静态引入，不仅拖慢首屏渲染，还造成冗余请求和内存占用。理想方案是按需加载（Lazy Load）：页面初始化仅加载核心逻辑（如 GetLinks.js），点击链接时再异步注入对应脚本。
实现原理是：动态创建 <script></script> 元素，设置其 src 属性为目标文件路径，并挂载到文档中（通常为 底部）。现代浏览器会自动下载并执行该脚本，且支持 Promise 化处理，便于链式调用与错误捕获。
以下是一个健壮、可复用的加载函数：
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
script.async = true; // 确保非阻塞
script.onload = () => resolve(script);
script.onerror = () => reject(new Error(`Failed to load script: ${src}`));
document.body.appendChild(script);
});
}使用时，将脚本路径通过 data-src 属性绑定到触发元素上，避免硬编码：
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
立即学习“Java免费学习笔记（深入）”；
<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>
配合事件委托（更高效，尤其适用于动态生成的链接）：
document.addEventListener('click', async function(e) {
if (e.target.classList.contains('js-loader')) {
e.preventDefault();
const src = e.target.getAttribute('data-src');
try {
await loadScript(src);
console.log(`✅ Successfully loaded: ${src}`);
// 可在此处调用新脚本暴露的全局函数，例如 initApple()
if (typeof initApple === 'function' && src === 'Apple.js') {
initApple();
}
} catch (err) {
console.error('❌ Load failed:', err.message);
alert(`加载失败：${src}\n${err.message}`);
}
}
});⚠️ 注意事项：
-
路径问题：本地文件（如桌面路径
file:///C:/.../Apple.js）受浏览器同源策略和安全限制，无法直接通过file://协议加载。请务必在本地服务器环境（如http://localhost:3000）下测试，推荐使用 VS Code 的 Live Server 插件或 Python 的python -m http.server。 -
执行时机：动态加载的脚本会在执行完成后触发
onload，但其中定义的变量/函数将挂载到全局作用域（window），确保后续调用前已加载完成。 -
重复加载：当前实现不防重，若需避免多次加载同一脚本，可维护一个
loadedScriptsSet 进行去重。 - 兼容性：该方法兼容所有现代浏览器（Chrome、Firefox、Safari、Edge），无需 polyfill。
总结：通过封装 loadScript() 并结合语义化 data-src 属性，你可轻松构建可扩展的脚本按需加载系统——既保障首页秒开，又支持百级 JS 模块灵活调度。只需确保运行于 HTTP(S) 环境，并合理设计脚本导出接口（如统一命名的初始化函数），即可形成清晰、低耦合的功能模块体系。
