如何在页面初始化之前,在一个没有html的公共js文件中引入另一个js文件,并且保证另一个js文件先加载完成?
时间: 2024-10-23 17:07:26 浏览: 15
在JavaScript中,如果你需要在一个公共JS文件(例如main.js)在页面初始化之前异步加载并依赖于另一个JS文件(例如dependency.js),可以使用`async/await`配合`fetch`或者`import()`函数(如果使用的是模块系统)。这里是一个示例:
```javascript
// main.js
(async () => {
// 确保dependency.js已经加载完成
const response = await fetch('dependency.js');
if (!response.ok) {
throw new Error(`Failed to load dependency.js: ${response.status}`);
}
const dependencyContent = await response.text();
// 在这里处理dependency.js的内容
// 现在你可以使用dependency.js的内容了
})();
```
如果你想使用CommonJS(如在Node.js环境或老版本浏览器中),可以使用`require`等同步导入机制,但在全局作用域中,应该避免阻塞整个页面加载,这时可以考虑使用`defer`属性:
```javascript
// main.js
const script = document.createElement('script');
script.src = 'dependency.js';
script.defer = true;
document.head.appendChild(script);
```
这样,`dependency.js`会在`DOMContentLoaded`事件触发后再加载。
阅读全文