requireJS的使用說明

時間 2020-07-10

原文原文鏈接

RequireJS的目標是鼓勵代碼的模塊化，它使用了不一樣於傳統<script>標籤的腳本加載步驟。能夠用它來加速、優化代碼，但其主要目的仍是爲了代碼的模塊化javascript

requireJS 加載代碼的時候，其相對路徑爲baseUrl,baseUrl一般被設置爲data-main指定文件的目錄html

em:java

<script src="js/libs/require.js"  defer async="true"  data-main="js/main.js"></script>

data-main:起始的jsjquery

src:依賴的require庫js數組

舉一個簡單的例子：async

Index.html:ide

<!doctype html>
<html lang="en">
 <head>
     <meta charset="UTF-8">
     <script type="text/javascript"   data-main="js/main.js"  src="js/require.js"></script>
 </head>
 <body>
 
 </body>
</html>

mian.js模塊化

require.config({
   baseUrl:"js/lib",//設置基本路徑
   paths:{
           "user":'user',                      //-----   js/lib/user
           "jquery":"jquery-1.11.3"   //-----js/lib/jquery-1.11.3
   }
 
/*方式二：
   paths:{
           "user":'lib/user',
           "jquery":"lib/jquery-1.11.3"
      }
*/
 });
 require(["jquery","user"],function($,user){//依賴的模塊
       $(function(){
           alert("juery加載完畢");
       });

對於每個分開的js: 採用AMD模式來編寫模塊，模塊必須採用特定的define()函數來定義函數

User.js(此時user.js是沒有依賴模塊的)優化

define([],function(){
           function fun1(){
             alert("it works");
          }
         fun1();
 })

注：如果模塊有依賴，第一個參數是一個數組，第二個參數是匿名函數

前面的依賴項將以參數的形式傳遞給函數，順序與以前一致

Demo:

define([「../cart」,」../inventory」],function(cart,inventory){
      return {
           color:」blue」,
           addToCart:function(){
                 inventory.decrement(this);
                 cart.add(this);
           }
    }
});

模塊也能夠不返回對象，任何有效的返回都是能夠的。

對於沒有采用AMD規範編寫。若是要加載它們的話，必須先定義它們的特徵。

注：require.config()接受一個配置對象，這個對象除了有前面說過的paths屬性以外，還有一個shim屬性，專門用來配置不兼容的模塊。具體來講，每一個模塊要定義

（1）exports值（輸出的變量名），代表這個模塊外部調用時的名稱；

（2）deps數組，代表該模塊的依賴性。

em:

require.config({
      baseUrl:"",
      paths:{
           "angular":"../ipi_view/eaf/common/lib/angualr"
      }
        shim：{
                'angular':{
                    exports:'angular',
                    deps:['angular']
　　　　  },
         ‘jquery-slide’:{
              deps: [‘jquery’]
         }，
　　　 'jquery.scroll': {
　　　　　　deps: ['jquery'],// 該模塊的依賴性。
　　　　　　exports: 'jQuery.fn.scroll'//這個模塊外部調用時的名稱
　　   }
       }
});

require([‘jquery-slide’]，function（jQ）{

 ......../......

});//保證了先加載jquery,在加載其插件

進一步解釋一下:

1）require.config的做用(主要用於解決有些第三法方非AMD庫文件的問題)，若是你的文件都是AMD，那麼你就能夠徹底刪除require.config這個東西了.

2）require.config的另外一個做用就是解決過分臃腫的文件路徑問題（直接說咱們通常在require.config裏面能夠簡化，將長的路徑問題一次性解決）.

require.config({
　　　　paths:{
　　　　　　「mycheck「:'../ipi_view/common/mycheck'，//自定義的一個公共指令
　　　　}
}) 
require(['mycheck'],function(){..................})

例如：

在paths中配置的文件能夠直接在require(['mycheck'],function(){......})中引用,這樣你的項目中全部的js文件中都會引入mycheck，這樣意味着你能夠直接在頁面上使用。

固然也能夠

require([''../ipi_view/common/mycheck'，‘’],function(){..................})

參考：http://www.ruanyifeng.com/blog/2012/11/require_js.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。