javascript - 动态且按顺序加载 JavaScript

Question

我有 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 }));

但没有效果。

Answer 1

这应该有效:

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 变量为 global .