簡単から難しいまで、JavaScriptのキャリアの一つを書きます.

5735 ワード

先にコードを付けます:
 1 (function(global) {
 2   var createScript, insertScript, makeLoadQueue;
 3   createScript = function(src) {
 4     var script;
 5     script = document.createElement('SCRIPT');
 6     script.src = "" + src + ".js";
 7     return script;
 8   };
 9   insertScript = function(scriptQueue) {
10     var script;
11     script = scriptQueue.shift();
12     if (script != null) {
13       document.head.appendChild(script);
14       return script.onload = function() {
15         return insertScript(scriptQueue);
16       };
17     } else {
18       return false;
19     }
20   };
21   makeLoadQueue = function(loadList) {
22     var loadQueue;
23     loadQueue = [];
24     loadList.forEach(function(src) {
25       return loadQueue.push(createScript(src));
26     });
27     return loadQueue;
28   };
29   return global.jsLoader = {
30     load: function(loadList) {
31       var queue;
32       queue = [];
33       queue = makeLoadQueue(loadList);
34       return insertScript(queue);
35     }
36   };
37 })(window);
この例は、事前に作成したリストファイルloadlist.jsを通じて、スクリプトファイルを順次同期してロードすることを示している.
直接参照の方法:
<!-- 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を並列にロードできるようにします.