动态加载JS文件

发布时间 2023-12-29 09:48:46作者: 江月年年何相似

在某些特殊场景下,特别是在库和框架的开发过程中,需要动态加载JS文件并执行它们。下面是使用 Promise 的简单封装。

function loadJS(files, done) {
// Get the head tag
const head = document.getElementsByTagName('head')[0];
Promise.all(files.map(file => {
return new Promise(resolve => {
//Create a script tag and add it to the head
const s = document.createElement('script');
s.type = "text/javascript";
s.async = true;
s.src = file;
//Listen to the load event and resolve if the loading is completed
s.addEventListener('load', (e) => resolve(), false);
head.appendChild(s);
});
})).then(done); // Everything is completed, execute the user's callback event
}
loadJS(["test1.js", "test2.js"], () => {
//User callback logic
});

 

上面的代码有两个核心点。一种是使用Promise处理异步逻辑,使用script标签加载执行js。