为了精简代码长度，把不常用的功能归到一个独立的 js 文件中，只在需要的时候才引用进来。这是我在公司一个已有项目的重构优化工作中提出来的一个建议。实现的思路有几种：

  • 1、创建 script 节点，指明该节点的 src 属性为 js 文件的 url，再把节点 appendChild 到 <head>中去。
  • 2、document.write("<script type='text/javascript' src='xxxx.js'></script>")
  • 3、使用 xmlhttp 对象，同步取回 js 文件的文本，并把文本设为新创建的 script 节点的 text  属性值。

第一种方法，是异步发生的，往往是 js 文件还没有下载完，就执行下面的过程了，测试时我发现不管是否加了 defer 属性，始终都是异步，这让我很郁闷。第二种方法好简单，但document.write 往往会把当前页面刷掉。第三种是我选择的方法，但其同步的特性也不得不提：如果js文件比较大，或者网速比较慢，读取的过程将需要消耗用户的时间，并且整个 UI 将动弹不得，比如点击沉下去的按钮也不会弹上来。因此第三种方法最好只导入比较小的js文件，或者在服务器所在机房的带宽很好时才使用。这方法将写入 myJSFrame 中：

 $.LoadScript = function(url){
 var myAjax = new Ajax.Request(
  url,
  {
   asynchronous:false,
   onComplete:function(x){
    var js = document.createElement("script");
    js.type = "text/javascript";
    js.defer = "defer";
    js.text = x.responseText;
    document.getElementsByTagName("head")[0].appendChild(js);   
   },
   onError:function(x){
    alert("loading script file occur an error:"+x.statusText);
   }
  }
 );
}