首頁 > web前端 > js教程 > 主體

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

PHP中文网
發布: 2017-06-21 10:59:39
原創
1831 人瀏覽過

當一個網頁引入很多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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板