动态加载JavaSript

在许多情况下，需要使用动态插入脚本的方式

1. 跨域访问：不同域下的脚本不能够通过该AJAX方式直接获得

2.延迟加载或预加载：由于浏览器会等所有外链脚本加载完才开始解析。为了提高用户响应速度和用户体验

应该让那些暂时不用的脚本延迟加载。另外在欢迎页面中可以使用预加载的方式先将以后要用到的脚本下载到本地。

3.灵活条件加载： 许多脚本需要根据用户的环境或者用户的行为条件加载一些脚本。

4. 加载顺序逻辑： 有些脚本之间加载顺序必须按照严格的顺序。此时使用动态加载的方式更好的控制这种逻辑。

5.提高并发速度：大部分浏览器都会对脚本加载线程数量加以控制，而使用动态加载的方式能够增加并发下载数量。

5. XHR方式动态加载能够提高动态脚本的解析性能。

使用插入script标签的方式动态加载脚本

function loadJS(url, func){

           var head=document.getElementsByTagName('head').item(0);

           var script=document.createElement('script');

           script.src=url;

           script.type='text/javascript';

           script.defer=true;

           script.onload = func;

           void(head.appendChild(script));

}

 

 //顺序加载JS，按照js_arr数组给定的顺序加载js文件

function squenceLoad(js_arr){

            var uid = $_GET("uid");

      //内部函数可共享闭包中的作用域，可以共享 js_arr数组

        var callback = function(){

           var url = js_arr.shift();

           if(url){ loadJS(url, callback);  }

        }

      //间接递归方式调用 loadJS , callback

        loadJS(js_arr.shift(), callback);

 }

//调用顺序加载的例子

document.onload = function(){

     var js_arr =["p.php?uid=0 ","p.php?uid=1","p.php?uid=2","p.php?uid=3"];//JS 加载链

     squenceLoad(js_arr);

}

//XHR脚本注入方式异步执行脚本

// 原理是通过修改<script> 标签的内容动态解析脚本，这种方式的优势是比 eval函数效率更高

而且要比前面介绍的方法更为灵活。脚本的内容可以是 拼接的语句，也可以是ajax获得的内容

function XHR( data){

           var head=document.getElementsByTagName('head').item(0);

           var script=document.createElement('script');

           script.text=data;

           void(head.appendChild(script));

}

///eval方式动态执行脚本的方式, 使用eval解析脚本的限制很多，首先复杂语句必须是括号包含的结构。同时eval的执行与执行的上下文也有关系。而且eval的效率较低。不过这种方法是ajax中动态获得数据的最常用的方式。

function execute(data){

  window.eval("("+data+")");

}