loadScripts方法

北京前端同事有个项目里用了ace-admin这个管理平台框架，不太喜欢这个框架，不过在里面发现了一段异步加载js脚本文件的代码，修改了一下贴到这里，以后自己项目里也可以用：

export function ready(optionalScriptsDependencies, cb) {
  if (arguments.length === 1) {
    waitForReady(cb);
  } else if (arguments.length === 2) {
    loadScripts(optionalScriptsDependencies, () => {
      waitForReady(cb);
    });
  }
}

function waitForReady(cb) {
  $(document).ready(function () {
    cb && cb();
  });
}

// ajaxLoadedScripts要放到loadScripts外才能起到全局统计的作用
const ajaxLoadedScripts = {};
function loadScripts(scripts, callback) {
  $.ajaxPrefilter("script", (opts) => {
    opts.cache = true;
  });
  setTimeout(() => {
    function finishLoading() {
      typeof callback === "function" && callback();
    }

    let deferredCount = 0;
    let resolved = 0;
    for (let i = 0; i < scripts.length; i++) {
      if (scripts[i]) {
        (() => {
          const scriptName =
            "js-" + scripts[i].replace(/[^\w\d-]/g, "-").replace(/--/g, "-");
          ajaxLoadedScripts[scriptName] !== true && deferredCount++;
        })();
      }
    }

    function nextScript(index) {
      index += 1;
      if (index < scripts.length) {
        loadScript(index);
      } else {
        finishLoading();
      }
    }

    function loadScript(index) {
      index = index || 0;
      if (!scripts[index]) {
        return nextScript(index);
      }

      const scriptName =
        "js-" + scripts[index].replace(/[^\w\d-]/g, "-").replace(/--/g, "-");
      // 只加载目前为止没有加载过的脚本
      if (ajaxLoadedScripts[scriptName] !== true) {
        $.getScript(scripts[index])
          .done(() => {
            ajaxLoadedScripts[scriptName] = true;
          })
          .complete(() => {
            ++resolved >= deferredCount ? finishLoading() : nextScript(index);
          });
      } else {
        nextScript(index);
      }
    }

    deferredCount > 0 ? loadScript() : finishLoading();
  }, 10);
}

使用方法很简单，碰到有js文件依赖的时候，这样使用ready方法：

ready(["../assets/js/jquery.validate.js"], () => {
  // 这时依赖的js脚本文件已经加载完毕了，document ready后要执行的代码放在此处
});

如果没有js文件依赖的话，这样使用ready方法：

ready(() => {
  // document ready后要执行的代码放在此处
});

下面是根据以前自己写过的方法封装一下得到的代码，作用差不多（没像上面的例子那样判断脚本是否已加载过，不过用document.write生成script标签加载js文件的话，浏览器自己也会做缓存处理的，问题不大吧-\_-）：

function loadAsyncScripts(scripts, callback) {
  const scriptsLength = scripts.length;
  scripts.forEach((item) =>
    loadAsyncScript(
      item,
      checkWhetherToExecuteCallback.bind(null, scriptsLength, callback),
    ),
  );
}

let counter = 0;
function checkWhetherToExecuteCallback(scriptsLength, cb) {
  ++counter === scriptsLength && cb();
}

function loadAsyncScript(src, callback) {
  var head = document.getElementsByTagName("head")[0];
  var script = document.createElement("script");
  script.setAttribute("type", "text/javascript");
  script.setAttribute("src", src);
  script.setAttribute("async", true);
  script.setAttribute("defer", true);
  head.appendChild(script);

  if (document.all) {
    script.onreadystatechange = function () {
      var state = this.readyState;
      if (state === "loaded" || state === "complete") {
        callback();
      }
    };
  } else {
    script.onload = function () {
      callback();
    };
  }
}

loadScripts方法 ​

loadScripts方法