动态加载 JavaScript 文件

稍微复杂的网站中，肯定要用到许多 JavaScript 文件。一般来说，在 HTML 页面中应该只加载基本的 JS 文件，以使得页面能够尽快地显示出来。然后在页面载入完毕之后，利用 onload 事件再载入其它 JS 文件。

动态加载 JS 文件的方法很简单，可以用下面的函数来实现：

var loadScript = function(url) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  document.body.appendChild(script);
};

这样增加的 script 元素，它的内容不一定是立即下载并执行的。如果我们想知道这个 JS 文件何时已经下载并执行完毕，然后运行后面的依赖代码，可以用下面的方法来判断（下面例子来自《高性能 JavaScript 编程》）：

var loadScript = function(url, callback) {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = url;
  if (script.readyState) {
    script.onreadystatechange = function() {
      if (script.readyState == "loaded" || script.readyState == "complete") { 
        script.onreadystatechange = null;
        callback(); 
      }
    };
  } else {
    script.onload = function() { callback(); }; 
  }
  document.body.appendChild(script);
};

其中 IE 浏览器不支持 script 元素的 onload 事件，因此我们改用 onreadystatechange 事件。

参考资料：
[1] js并行加载，顺序执行
[2] 高性能JavaScript 笔记之 第1章 加载和执行
[3] Javascript文件加载：LABjs和RequireJS
[4] jQuery.getScript() | jQuery API Documentation