如何使用require.js？讓JS載入速度更快
- PHP中文网原創
- 2017-06-21 10:59:391858瀏覽
當一個網頁引入很多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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn