JavaScript 异步加载JS

https://wildye.cn/posts/737ef138/

script 标签属性

defer HTML4中定义，兼容 IE 4+ 和 firebox 3.5 +
async HTML5中引入

<!-- 等待页面(DOM)文档解析完成后执行 -->
<script defer src="one.js" onload="callBack()"></script>

<!-- 加载完成后自动执行，代码不能写在标签中 -->
<script async src="one.js" onload="callBack()"></script>

XMLHttpRequest 脚本注入

var xhr = new XMLHttpRequest();
xhr.open("get","one.js",true);
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){
    if(xhr.status >= 200 && xhr.status < 300 || xhr.status ==304){
      var script = document.createElement("script");
      script.type = "text/javascript"
      script.text = xhr.responseText;
      document.body.appendchild(script);
    }
  }
}

动态创建 script 元素

readystatechange //readyState的状态改变时触发

readystate 状态：

状态码	状态	备注
0	“uninitilized”	未初始化
1	“loading”	开始下载
2	“loaded”	下载完成
3	“interactive”	解析/数据完成下载但尚不可用
4	“completed”	所有数据已准备就绪

function loadScript(url,callback){
  var script = document.createElement("script");
  script.type = "text/javascript";
  if(script.readyState){ // IE
    script.onreadystatechange = function(){
      if(script.readyState == "loaded" || script.readyState == "completed"){
        callback();
      }
    }
  }else{ //Other
    script.onload = function(){
      callback();
    };
  }
  script.src = url;
  document.head.appengChild(script);
}

loadScript("one.js",function(){
  Application.init();
})

LazyLoad

• 下载地址 https://github.com/rgrove/lazyload/
• 文件大小：2.66 KB
• loadScript( )函数的增强版

<script type="text/javascript" src="lazyLoad-min.js"></script>
<script type="text/javascript">
  LazyLoad.js("one.js",function(){
    Application.init();
  });

  // 加载多个
  LazyLoad.js(["one.js","two.js"],function(){
    Application.init();
  });
</script>

LABjs

• 下载地址 https://www.drupal.org/project/labjs
• 文件大小：5.37 KB
• 适用于按指定顺序加载，有依赖关系，支持链式操作*
• $LAB.script()：方法用来定义需要下载的JavaScript文件*
• $LAB.wait()：用来指定文件下载并执行完毕后所调用的函数*
• .setOptions(AlwaysPreserveOrder:false) 默认false，若为true，则每个script()后都会默认设置一个wait()，使得链上的脚本一个个执行。

<script type="text/javascript" src="lab.js"></script>
<script type="text/javascript">
  $LAB.setOptions({AlwaysPreserveOrder:true})
    .script("one.js").wait() // 尽管是并行下载，但one在two之前执行
    .script("two.js")
    .wait(function(){
      Application.init();	
    })
</script>

sea.js

• 下载地址 https://github.com/seajs/examples
• 适用于模块化开发 加载

<script type="text/javascript" src="sea.js"></script>

<script type="text/javascript">

  // 配置 seajs
  seajs.config({
    base: "../sea-modules/",
    alias: {
      "jquery": "jquery/jquery/1.10.1/jquery.js"
    }
  })
  
  // 加载入口模块
  seajs.use("../static/hello/src/main")

  // 所有模块都通过 define 来定义
  define(function(require, exports, module) {

    // 通过 require 引入依赖
    var $ = require('jquery');
    var Spinning = require('./spinning');

    // 通过 exports 对外提供接口
    exports.doSomething = ...;

    // 或者通过 module.exports 提供整个接口
    module.exports = ...;

  });
</script>