从易到难,写一个JavaScript加载器之一

先上代码:

(function(global) {
  var createScript, insertScript, makeLoadQueue;
  createScript = function(src) {
    var script;
    script = document.createElement('SCRIPT');
    script.src = "" + src + ".js";
    return script;
  };
  insertScript = function(scriptQueue) {
    var script;
    script = scriptQueue.shift();
    if (script != null) {
      document.head.appendChild(script);
      return script.onload = function() {
        return insertScript(scriptQueue);
      };
    } else {
      return false;
    }
  };
  makeLoadQueue = function(loadList) {
    var loadQueue;
    loadQueue = [];
    loadList.forEach(function(src) {
      return loadQueue.push(createScript(src));
    });
    return loadQueue;
  };
  return global.jsLoader = {
    load: function(loadList) {
      var queue;
      queue = [];
      queue = makeLoadQueue(loadList);
      return insertScript(queue);
    }
  };
})(window);

这个实例,展示了通过一个预制的清单文件 loadlist.js,来按照顺序同步加载script脚本文件

直接引用的方式:

<!-- jQuery 2.1.4 -->
<script src="lib/admin-lte/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="lib/admin-lte/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- iCheck -->
<script src="lib/admin-lte/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
<!--angular-->
<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.min.js"></script>
<script src="lib/angular-animate/angular-animate.min.js"></script>
<!--不带watchers的数据绑定指令-->
<script src="//cdn.bootcss.com/angular-bindonce/0.3.1/bindonce.min.js"></script>

使用这个库的方式:

<script src="public/jsLoader/jsLoader.js"></script>
<script src="loadList.js"></script>

loadList:

(function (global) {
    var loadList = [
        'lib/admin-lte/plugins/jQuery/jQuery-2.1.4.min',
        'lib/admin-lte/bootstrap/js/bootstrap.min',
        'lib/admin-lte/plugins/iCheck/icheck.min',
        'lib/angular/angular.min',
        'lib/angular-ui-router/angular-ui-router.min',
        'lib/angular-animate/angular-animate.min',
        '//cdn.bootcss.com/angular-bindonce/0.3.1/bindonce.min',
        //main
        'app'
    ]
    global.jsLoader.load(loadList);
})(window);

对比html中的引入,改进了 代码的可读性和项目的可维护性了,并通过动态创建script,以非阻塞方式加载了js.

下一篇文章则改进这个库,使之能够同样的方式并行加载css