當一個網頁引入很多js文件,網頁加載會變得很慢,並且js文件存在依賴性,有時候顛倒順序就不能運行了,這很影響用戶體驗。
require.js解決了異步加載,提高網頁的加載,同時依賴順序的js可以用數組排序。
第一部加載require.js放到目錄的js子目錄下:
<script src="js/require.js"></script>
需要加一個參數 defer async="true" 表示這個文件需要異步加載 defer兼容IE版本
需要加data-main="js/main" 表示js下的main.js是主要加載模塊。工作時候一定要嚴謹。
require()函數接受兩個參數。第一個參數是一個數組,表示所依賴的模塊,第二個是回到函數,當前面模塊都加載成功后,它將被調用。
//main.js:
define(function (require,exports,module){ exports.add = function (x,y){ return x+y; }; });
//math.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="require/require.js"></script> <script> require(['main'], function (math){ alert(math.add(1,1)); }); </script> </head> <body> </body> </html>
返回一個2,則成功彈出。
一起調用
//b.js:
define(function (require,exports,module){ exports.add = function (obj,oEv,show){ return obj[addEventListener(oEv,show,false)] }; });
//math.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="require/require.js"></script> <script> var btn=document.getElementById('btn'); function show(){ alert('彈出') } require(['main','main'], function (math){ math.add(btn,'click',show); alert(math.add(1,1)); }); </script> </head> <body> <button id="btn">提交</button> </body> </html>
看玩此文,如果有什么不妥之處望請留言。