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

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

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

每次调用的时候遍历此路劲是否存在,如存在,就调用此资源对象的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));
}

posted @ 2018-04-11 11:03  大棒子  阅读(1494)  评论(0编辑  收藏  举报