动态和顺序加载javascript

load javascript dynamically and sequentially

本文关键字：javascript 加载 顺序 动态      更新时间：2023-09-26

我有5个不同的js文件，我想在ajax调用成功响应状态后执行。

我现在正在做的是:

function require(list, fn)
{
    for (var i = 0; i < list.length; i++) {
        var headID = document.getElementsByTagName("head")[0];
        var newScript = document.createElement('script');
        newScript.type = 'text/javascript';
        newScript.src = list[i];
        if (newScript.readyState){  //IE
        newScript.onreadystatechange = function(){
            if (newScript.readyState == "loaded" ||
                newScript.readyState == "complete"){
                newScript.onreadystatechange = null;
                callback();
            }
          };
        } else {  //Others
          newScript.onload = function(){
            callback();
        };
      }
      newScript.src = url;
      headID.appendChild(newScript);
    }
}

假设我有file1.js,file2.js,file3.js。我在file2.js上声明了一个变量dca，我想在file3.js中使用它进行一些操作。为此，我需要依次加载file1.js和file2.js。但不幸的是，这并没有发生在我使用的方法中。

请帮助我如何实现这个目标。

我甚至尝试过

addEventListeners('load',function({ //some operations }));

应该可以:

const require = ([head, ...tail]) => {
  const loadScript = link => new Promise((fulfill, reject) => {
    const script = document.createElement('script');
    script.addEventListener('load', fulfill);
    script.addEventListener('error', reject);
    script.src = link;
    document.head.appendChild(script);
  });
  loadScript(head).then(() => {
    if (tail.length > 0) {
      require(tail);
    }
  });
};

我希望代码是自解释的。

还要确保dca变量是全局的

相关文章：