從易到難,寫一個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