Magento開發基礎知識之RequireJs

1、RequireJS概述

　　RequireJS是一個工具庫，主要用於客戶端的模塊管理。實現異步或動態加載，從而提升代碼的性能和可維護性。

　　RequireJS的基本思想是，經過define方法，將代碼定義爲模塊；經過require方法，實現代碼的模塊加載。

　　1.1define方法：定義模塊

　　　　define方法用於定義模塊，RequireJS要求每一個模塊放在一個單獨的文件裏。

　　　　按照是不是依賴其餘模塊，能夠分紅兩種狀況討論。第一種狀況是定義獨立模塊，即所定義的模塊不依賴其餘模塊；第二種是定義非獨立模塊，即所定義的模塊依賴於其餘模塊。

　　1）獨立模塊

　　　　若是被定義的模塊是一個獨立模塊，不須要依賴任何其餘模塊，能夠直接用define方法生成。

　　　　

define({
    method1 : function(){},
    method2 : function(){}
});

　　上面代碼生成了一個擁有method一、method2兩個方法的模塊。

　　另外一種等價的方法是，把對象寫成一個函數，該函數的返回值就是輸出的模塊。

　　

define(function(){
    return {
        method1:function() {},
        method2:function() {}
};
})

　　後一種寫法的自由度更高一點，能夠在函數體內寫一些模塊初始化代碼。

　　值得指出的是，define定義的模塊能夠返回任何值，不限於對象。

2）非獨立模塊

　　若是被定義的模塊須要依賴其餘模塊，則define方法必須採用下面的格式。

　　

define(['module1','module2'],function(m1,m2) {

.....

});

　　define方法的第一個參數是一個數組，它的成員是當前模塊所依賴的模塊。define方法的第二個參數是一個函數，當前面數組的全部成員加載成功後，它將被調用。它的參數與數組的成員一一對應。

 

1.2require方法：調用模塊

　　require方法用於調用模塊，它的參數與define方法相似。

　　

require(['foo','bar'],function( foo, bar){
    
    foo.doSomething();
});

2.配置require.js:　config方法

　　require方法自己也是一個對象，它帶有一個config方法，用來配置require.js運行參數。config方法接受一個對象做爲參數。

　　

require.config({
    paths: {
        jquery: [
            'lib/jquery'
            ]
        }
});

　　config方法的參數對象有如下主要成員：

　　　1）paths

　　　　paths參數指定各個模塊的位置。這個位置能夠是同一個服務器上的相對位置，也能夠是外部網址。能夠爲每一個模塊定義多個位置，若是第一個加載失敗，則加載第二位置。指定本地文件路徑時，能夠省略文件最後的js後綴名。

　　　2）baseUrl

　　　　baseUrl參數指定本地模塊位置的基準目錄，即本地模塊的路徑是相對於哪一個目錄的。該屬性一般由require.js加載時的data-main屬性指定。

　　　3）shim

　　　　有些庫不是AMD兼容的，這個時候就須要指定shim屬性的值。shim能夠理解成「墊片」，用來幫助require.js加載非AMD規範的庫。

　　　　

require.config({
    paths:{
        "underscore":"vender/underscore"
    },
    shim: {
        "underscore":{
                exports:"_"
        }
    }
});

3.插件

　　requireJS容許使用插件，加載各類格式的數據。

 

4.優化器 r.js

　　RequireJS提供一個基於node.js命令行工具r.js，用來壓縮多個js文件。它的主要做用是將多個模塊文件壓縮合併成一個腳本文件，以減小網頁的HTTP請求數。

以上爲RequireJS大概理解，後期會更詳細講解requireJS在magento中的應用。

　Castle