动态加载js文件的方法封装
总结一下,动态加载js文件的方法封装。
以后总结这个方法拿来可以直接使用
/**
* 加载js文件的方法封装
*/
class LoadScrpt {
/**
* 加载单个JS
*/
static singleLoad(src) {
return new Promise(function (resolve, reject) {
let shouldAppend = false;
let el = document.querySelector('script[src="' + src + '"]');
if (!el) {
el = document.createElement('script');
el.type = 'text/javascript';
el.async = true;
el.src = src;
shouldAppend = true;
}else if (el.hasAttribute('data-loaded')) {
resolve(el);
return;
}
el.addEventListener('error', reject);
el.addEventListener('abort', reject);
el.addEventListener('load', function loadScriptHandler() {
el.setAttribute('data-loaded', true);
resolve(el);
});
if (shouldAppend) {
document.head.appendChild(el);
}
});
}
/**
* 加载js数组
*/
static load(list) {
let that = this;
return new Promise(resolve => {
function doLoad(url) {
that.singleLoad(url).then(() => {
if (list.length > 0) {
doLoad(list.shift())
} else {
resolve()
}
})
}
if (list.length > 0) {
doLoad(list.shift())
} else {
resolve()
}
})
}
};
export default LoadScrpt;