先上代碼:

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,來按照順序同步加載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

轉載于:https://www.cnblogs.com/jackyKin/p/4684220.html

總結

以上是生活随笔為你收集整理的从易到难,写一个JavaScript加载器之一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。