一、常用的方法與命令

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的無棣網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

• require
• define
  其中define是用于定義模塊，而require是用于載入模塊以及載入配置文件。
  通過

二、參數(shù)配置
在requireJS中一個文件就是一個模塊，其表現(xiàn)則是以key/value的鍵值對格式，key即模塊的名稱（模塊ID），而value則是文件（模塊）的地址

基本參數(shù)配置：

//index.html

require.config() 是用于配置參數(shù)的核心方法，它接收一個有固定格式與屬性的對象作為參數(shù)，這個對象便是我們的配置對象。

在配置對象中 baseUrl 定義了基準目錄，它會與 paths中模塊的地址自動進行拼接，構(gòu)成該模塊的實際地址，并且當配置參數(shù)是通過script標簽嵌入到html文件中時，baseUrl默認的指向路徑就是該html文件所處的地址。

paths 屬性的值也是一個對象，該對象保存的就是模塊key/value值。其中key便是模塊的名稱與ID，一般使用文件名來命名，而value則是模塊的地址，在requireJS中，當模塊是一個JS文件時，是可以省略 .js 的擴展名，比如 “index.js” 就可以直接寫成 “index” 。而當定義的模塊不需要與 baseUrl 的值進行拼接時，可以通過 "/" 與 http:// 以及 .js 的形式來繞過 baseUrl的設(shè)定。

shim 屬性
它的值是一個對象，可以用于聲明非標準模塊的依賴和返回值。
所謂的 “非標準模塊” 指的是那些不符合AMD規(guī)范的JS插件。

require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxx.xxxx.com/js/jquery.min',
        'index':'index',
        'say':'say',
        'bar':'bar',
        'tools':'tools'
    },
    shim:{
        'tools':{
            deps:['bar'],
            exports:'tool'
        },
        'say':{
            deps:['./a','./b'],
            init:function(){
                return {
                    'sayBye':sayBye,
                    'sayHellow':sayHellow
                }
            }
        }
    }
});

require(['index']);

這里需要注意的是如果所加載的模塊文件是符合AMD規(guī)范，比如通過 define 進行定義的，那么require默認的優(yōu)先級將是標準的，只有在不符合標準的情況下才會采用shim中定義的參數(shù)。

在 index 模塊執(zhí)行時：

define(['jquery','tool','say'],function($,tool,say){
    tool.drag();
    say.sayHellow();
    say.sayBye();
})

上面的示例中，關(guān)于 shim 中有三個重要的屬性，它們分別是：

• deps: 用于聲明當前非標準模塊所依賴的其它模塊，值是一個數(shù)組，數(shù)組元素是模塊的名稱或者是ID。
• exports:用于定義非標準模塊的全局變量或者方法。值一般是一個字符串。
• init:用于初始，處理，非標準模塊的全局變量或者是方法，常用于當非標準模塊存在多個全局變量以及方法，值是一個函數(shù)。

//示例：
require.config({
    baseUrl:'js/',
    paths:{
        'jquery':'http://xxx.xxxx.com/js/jquery.min',
        'index':'index'
    }
});
require(['index']);

三、加載配置文件

<script src="js/require.js"></script>

四、定義模塊
在我們選擇requireJS來模塊化開發(fā)我們的項目或者頁面時，就要明確的知道我們以后所編寫的代碼或者是某段功能，都是要放在一個個定義好的模塊中。
下面是requireJS定義模塊的方法格式：

define([id,deps,] callback);

• ID:模塊的ID，默認的便是文件名，一般無需使用者自己手動指定。
• deps:當前模塊所以依賴的模塊數(shù)組，數(shù)組的每個數(shù)組元素便是模塊名或者叫模塊ID。
• callback:模塊的回調(diào)方法，用于保存模塊具體的功能與代碼，而這個回調(diào)函數(shù)又接收一個或者多個參數(shù)，這些參數(shù)會與模塊數(shù)組的每個數(shù)組元素一一對應(yīng)，即每個參數(shù)保存的是對應(yīng)模塊返回值。

//示例
//index.js
define(['jquery','./utils'], function($) {
    $(function() {
        alert($);
    });
});

從上面的示例中我們可以看出 index 模塊中，依賴了 'jquery' 模塊，并且在模塊的回調(diào)函數(shù)中，通過 $ 形參來接收 jquery模塊返回的值，除了 jquery 模塊，index模塊還依賴了 utils 模塊，因為該模塊沒有在配置文件中定義，所以這里以附加路徑的形式單獨引入進來的。

五、載入模塊
在說載入模塊之前，我們先聊聊“模塊依賴”。模塊與模塊之間存在著相互依賴的關(guān)系，因此就決定了不同的加載順序，比如模塊A中使用到的一個函數(shù)是定義在模塊B中的，我們就可以說模塊A依賴模塊B，同時也說明了在載入模塊時，其順序也是先模塊A，再模塊B。
在require中，我們可以通過 require() 方法去載入模塊。其使用格式如下：

require(deps[,callback]);

• deps:所要載入的模塊數(shù)組。
• callback:模塊載入后執(zhí)行的回調(diào)方法。

require.config({
        paths:{
                'index':'index'
        }
});
require(['index']);

requireJS 通過 require([]) 方法去載入模塊，并執(zhí)行模塊中的回調(diào)函數(shù)，其值是一個數(shù)組，數(shù)組中的元素便是要載入的模塊名稱也就是模塊ID，這里我們通過 require(['index']) 方法載入了 index 這個模塊，又因為該模塊依賴了 jquery 模塊，所以接著便會繼續(xù)載入jquery模塊，當jquery模塊加載完成后，便會將自身的方法傳遞給形參 $ 最后執(zhí)行模塊的回調(diào)方法，alert出$參數(shù)具體內(nèi)容

六、模塊的返回值
require中定義的模塊不僅可以返回一個對象作為結(jié)果，還可以返回一個函數(shù)作為結(jié)果。

// utils.js
define(function(require,exports,modules){
    function sayHellow(params){
        alert(params);
    }

    return sayHellow
});

// index.js
define(function(require,exports,modules){
    var sayHellow = require('utils');
    sayHellow('hellow World');
})

如果通過return 返回多種結(jié)果的情況下：

// utils.js
define(function(require,exports,modules){
    function sayHellow(params){
        alert(params);
    }

    function sayBye(){
        alert('bye-bye！');
    }

    return {  //return一個對象出來
        'sayHellow':sayHellow,
        'sayBye':sayBye
    }
});

// index.js
define(function(require,exports,modules){
    var utils = require('utils');
    utils.sayHellow('hellow World');
})

這里有一個注意的地方，那就是非依賴性的模塊，可以直接在模塊的回調(diào)函數(shù)中，加入以下三個參數(shù)：

• require:加載模塊時使用。
• exports:導(dǎo)出模塊的返回值。
• modules:定義模塊的相關(guān)信息以及參數(shù)。

總結(jié)：
1、在首頁通過引入require.js
2、通過define([id,deps,] callback);定義模塊，

• ID:模塊的ID，默認的便是文件名，一般無需使用者自己手動指定。即ID不用管
• deps:當前模塊所以依賴的模塊數(shù)組，數(shù)組的每個數(shù)組元素便是模塊名或者叫模塊ID。
• callback:模塊的回調(diào)方法，用于保存模塊具體的功能與代碼，而這個回調(diào)函數(shù)又接收一個或者多個參數(shù)，這些參數(shù)會與模塊數(shù)組的每個數(shù)組元素一一對應(yīng)，即每個參數(shù)保存的是對應(yīng)模塊返回值。
• 模塊的返回值

3、通過require.config配置模塊的路徑，
4、通過require(deps[,callback]);引入模塊

• deps:所要載入的模塊數(shù)組。
• callback:模塊載入后執(zhí)行的回調(diào)方法。