簡単から難しいまで、JavaScriptのキャリアの一つを書きます.
5735 ワード
先にコードを付けます:
直接参照の方法:
次の文章はこのライブラリを改善し、同じ方法でcssを並列にロードできるようにします.
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を並列にロードできるようにします.