js实现加载
实现JavaScript加载的方法
动态加载脚本
使用document.createElement创建script元素并添加到DOM中：
const script = document.createElement('script');
script.src = 'path/to/script.js';
document.head.appendChild(script);使用defer属性
在HTML中声明脚本时添加defer属性，使脚本在文档解析完成后按顺序执行：
<script src="script.js" defer></script>使用async属性
对于不依赖其他脚本的异步加载，使用async属性：
<script src="script.js" async></script>模块化加载（ES6） 使用ES6的模块化语法动态导入：
import('/modules/myModule.js')
.then(module => {
module.default();
});XMLHttpRequest加载 通过XHR请求获取脚本内容后注入：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'script.js');
xhr.onload = function() {
eval(xhr.responseText);
};
xhr.send();事件监听确保加载完成
为动态加载的脚本添加onload事件处理：
script.onload = function() {
console.log('Script loaded successfully');
};错误处理
添加onerror事件处理加载失败情况：
script.onerror = function() {
console.error('Error loading script');
};检测加载状态
通过检查readyState判断传统脚本加载状态：
if (document.readyState === 'complete') {
// 文档和所有资源已加载
}使用Promise封装 创建可复用的脚本加载函数：
function loadScript(url) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}动态加载CSS 相同方法适用于样式表加载：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'style.css';
document.head.appendChild(link);
