简单的实现脚本并行下载

 

我们知道，浏览器是按顺序下载并执行脚本的，当脚本比较多时会阻塞页面加载。解决方法是可以在IE上配置defer或者其他浏览器上配置async属性来实行脚本的异步加载，但是这两种方式都有一定的限制：我们无法知道脚本什么时候加载完毕！所有，就有了下面的代码。它能实现并行地下载脚本，并能在所有脚本下载完毕后触发一个回调函数。如下面代码所示：

(function( $, win, undefined ){
    
    $.loadScripts = function( urlArrays, callback ){
      urlArrays = $.isArray( urlArrays )   ? urlArrays : [ urlArrays ];
      callback  = $.isFunction( callback ) ? callback  : $.noop
      var loadScript = function( url ) {
          var deferred = $.Deferred(),
              script = document.createElement( "script" );
          script.type = "text/javascript";
          script.src =  url;
          script.onload = script.onreadystatechange = function() {
             if( !this.readyState || this.readyState === "loaded" || this.readyState === "completed") {
                 deferred.resolve();
             }
          }
          document.getElementsByTagName( "head" )[0].appendChild( script );
          return deferred.promise();
      };

      var deferredObject = $.map( urlArrays, function( url ){
           return loadScript( url );
      });

      $.when.apply( $, deferredObject).then( callback );
        
    }

})( jQuery, window );

</script>

使用很简单，我们只需要这样使用即可：

(function( $ ){
    $.loadScripts(["alert.js","yes.js"],function(){console.log("success...")})
})( jQuery );

这样我们会并行下载alert.js和yes.js两个脚本，当两个脚本下载完毕后控制台会打印出"success"...

我们的代码里面还涉及到了$.Deferred这个对象，它可以非常方便的帮助我们进行异步编程。具体可以参考下jQuery API。

上面的代码非常简单，要有更多的依赖关系等，可以使用 LABjs、required.js、seajs等。。