动态实现JS
动态实现 JavaScript 的方法
动态加载脚本
通过创建 script 元素并插入到 DOM 中实现动态加载。例如：
const script = document.createElement('script');
script.src = 'path/to/script.js';
document.body.appendChild(script);此方法适用于按需加载第三方库或模块。
使用 import() 动态导入模块
ES6 的 import() 函数支持异步加载模块，返回一个 Promise：
import('./module.js')
.then(module => {
module.init();
})
.catch(err => console.error('加载失败:', err));适用于代码分割或懒加载场景。
动态生成并执行代码
通过 eval() 或 Function 构造函数动态执行字符串代码：
const dynamicCode = 'console.log("动态执行")';
eval(dynamicCode); // 注意安全风险
// 或使用 Function
const func = new Function('arg', 'console.log(arg)');
func('Hello');需谨慎处理用户输入以避免 XSS 漏洞。
监听脚本加载事件
为动态加载的脚本添加事件监听器：
script.onload = () => console.log('脚本加载完成');
script.onerror = () => console.error('脚本加载失败');性能与安全注意事项
- 缓存控制：为动态加载的脚本添加版本号或哈希以避免缓存问题。
- 依赖管理：确保动态加载的脚本依赖顺序正确，可使用 Promise 链或
async/await。 - CSP 限制：若页面启用 Content Security Policy，需配置
script-src允许动态加载的源。
实际应用场景
- 条件加载：根据用户设备或权限加载不同脚本。
- 插件系统：允许第三方通过动态注入脚本扩展功能。
- 性能优化：拆分首屏非关键代码为动态加载。
通过结合以上方法，可灵活实现 JavaScript 的动态化，但需权衡灵活性、性能与安全性。
