JS动态引入

[louzhedong]

JS动态引入

当我们对性能有某些要求，希望JS脚本能在必要的时候才加载，我们就可能会用到动态JS引入

/**
 *
 *
 * @export
 * @param {*} url  JS的地址
 * @param {*} callback 加载完JS之后的回调函数，用于执行异步函数
 * @returns
 */
export function loadScript(url, callback) {
  // 通过闭包保存已经加载过的JS，防止重复加载
  const urlList = [];
  return function () {
    if (urlList.indexOf(url) > -1) {
      return;
    }
    callback = callback || function () { };
    const script = document.createElement('script');
    script.type = 'text/javascript';
    if (script.readyState) { //IE
      script.onreadystatechange = function () {
        if (script.readyState === "loaded" || script.readyState === "complete") {
          script.onreadystatechange = null;
          callback();
        }
      };
    } else { //Others
      script.onload = function () {
        callback();
      };
    }
    script.src = url;
    document.body.appendChild(script);
    urlList.push(url);
  };
}

使用方法

loadScript("https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js")();