當一個網頁引入很多js文件,網頁載入會變得很慢,並且js文件存在依賴性,有時候顛倒順序就不能運行了,這很影響用戶體驗。
require.js解決了非同步加載,提高網頁的加載,同時依賴順序的js可以用數組排序。
第一部載入require.js放到目錄的js子目錄下:
<script# src ="js/require.js?1.1.10">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?1.1.10"></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?1.1.10"></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>
看玩此文,如果有任何不妥之處望請留言。
以上是如何使用require.js?讓JS載入速度更快的詳細內容。更多資訊請關注PHP中文網其他相關文章!