靈活實用require.js,讓JS加載速度更流暢


當一個網頁引入很多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>

 

看玩此文,如果有什么不妥之處望請留言。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM