js中如何避免动态引入重复资源

Posted 2020-10-30 大棒子

创建存储数据的数组或者对象；

每次调用方法的时候，往里面添加资源对象，包括路径；

每次调用的时候遍历此路劲是否存在，如存在，就调用此资源对象的promise进行操作。

可避免资源未加载完成就执行的情况。

var arr = [];
function getStyle(src){
　　let script = document.createElement(‘script‘);
　　script.type = ‘text/javascript‘;
　　script.async = true;
　　script.defer = true;
　　script.src = src;
　　arr.find(e => e.src === src) || document.head.appendChild(script);
　　arr.find(e => e.src === src) || arr.push({
　　　　　　　　　　　　　　　　　　　　src: src,
　　　　　　　　　　　　　　　　　　　　promise: new Promise((rev,rej) => {
　　　　　　　　　　　　　　　　　　　　　　　　　　script.onload = () => rev(222)
　　　　　　　　　　　　　　　　　　　　　　　　　})
　　　　　　　　　　　　　　　　　　　　});

　　return arr.find(e => e.src === src).promise;
}
for(var i = 0;i < 20;i++){
　　　　getStyle(‘https://code.jquery.com/jquery-3.1.1.min.js‘).then((a)=>console.log(a));
}