如何使用require.js？讓JS載入速度更快-js教程-PHP中文網

如何使用require.js？讓JS載入速度更快

PHP中文网

發布： 2017-06-21 10:59:39

原創

1765 人瀏覽過

當一個網頁引入很多js文件，網頁載入會變得很慢，並且js文件存在依賴性，有時候顛倒順序就不能運行了，這很影響用戶體驗。

require.js解決了非同步加載，提高網頁的加載，同時依賴順序的js可以用數組排序。

第一部載入require.js放到目錄的js子目錄下:

需要加一個參數 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中文網其他相關文章！