一、常用的方法與命令
- require
- define
其中define是用於定義模塊，而require是用於載入模塊以及載入配置文件。
通過 <script> 標籤，將require.js 文件引入到當前的 HTML 頁面中
<script src="js/require.js"></script>
二、參數配置
在requireJS中一個文件就是一個模塊，其表現則是以key/value的鍵值對格式，key即模塊的名稱（模塊ID），而value則是文件（模塊）的地址
基本參數配置：
//index.html
<script>
require.config({
baseUrl:'js/',
paths:{
'jquery':'http://xxxx.xxx.com/js/jquery.min',
'index':'index'
},
shim:{
}
});
require(['index']);
</script>require.config() 是用於配置參數的核心方法，它接收一個有固定格式與屬性的對象作爲參數，這個對象便是我們的配置對象。
在配置對象中 baseUrl 定義了基準目錄，它會與 paths中模塊的地址自動進行拼接，構成該模塊的實際地址，並且當配置參數是通過script標籤嵌入到html文件中時，baseUrl默認的指向路徑就是該html文件所處的地址。
paths 屬性的值也是一個對象，該對象保存的就是模塊key/value值。其中key便是模塊的名稱與ID，一般使用文件名來命名，而value則是模塊的地址，在requireJS中，當模塊是一個JS文件時，是可以省略 .js 的擴展名，比如 “index.js” 就可以直接寫成 “index” 。而當定義的模塊不需要與 baseUrl 的值進行拼接時，可以通過 "/" 與 http:// 以及 .js 的形式來繞過 baseUrl的設定。
shim 屬性
它的值是一個對象，可以用於聲明非標準模塊的依賴和返回值。
所謂的 “非標準模塊” 指的是那些不符合AMD規範的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規範，比如通過 define 進行定義的，那麼require默認的優先級將是標準的，只有在不符合標準的情況下才會採用shim中定義的參數。
在 index 模塊執行時：
define(['jquery','tool','say'],function($,tool,say){
tool.drag();
say.sayHellow();
say.sayBye();
})上面的示例中，關於 shim 中有三個重要的屬性，它們分別是：
- deps: 用於聲明當前非標準模塊所依賴的其它模塊，值是一個數組，數組元素是模塊的名稱或者是ID。
- exports:用於定義非標準模塊的全局變量或者方法。值一般是一個字符串。
- init:用於初始，處理，非標準模塊的全局變量或者是方法，常用於當非標準模塊存在多個全局變量以及方法，值是一個函數。
//示例：
require.config({
baseUrl:'js/',
paths:{
'jquery':'http://xxx.xxxx.com/js/jquery.min',
'index':'index'
}
});
require(['index']);三、加載配置文件
<script src="js/require.js"></script>
四、定義模塊
在我們選擇requireJS來模塊化開發我們的項目或者頁面時，就要明確的知道我們以後所編寫的代碼或者是某段功能，都是要放在一個個定義好的模塊中。
下面是requireJS定義模塊的方法格式：
define([id,deps,] callback);
- ID:模塊的ID，默認的便是文件名，一般無需使用者自己手動指定。
- deps:當前模塊所以依賴的模塊數組，數組的每個數組元素便是模塊名或者叫模塊ID。
- callback:模塊的回調方法，用於保存模塊具體的功能與代碼，而這個回調函數又接收一個或者多個參數，這些參數會與模塊數組的每個數組元素一一對應，即每個參數保存的是對應模塊返回值。
//示例
//index.js
define(['jquery','./utils'], function($) {
$(function() {
alert($);
});
});從上面的示例中我們可以看出 index 模塊中，依賴了 'jquery' 模塊，並且在模塊的回調函數中，通過 $ 形參來接收 jquery模塊返回的值，除了 jquery 模塊，index模塊還依賴了 utils 模塊，因爲該模塊沒有在配置文件中定義，所以這裏以附加路徑的形式單獨引入進來的。
五、載入模塊
在說載入模塊之前，我們先聊聊“模塊依賴”。模塊與模塊之間存在着相互依賴的關係，因此就決定了不同的加載順序，比如模塊A中使用到的一個函數是定義在模塊B中的，我們就可以說模塊A依賴模塊B，同時也說明了在載入模塊時，其順序也是先模塊A，再模塊B。
在require中，我們可以通過 require() 方法去載入模塊。其使用格式如下：
require(deps[,callback]);
- deps:所要載入的模塊數組。
- callback:模塊載入後執行的回調方法。
require.config({
paths:{
'index':'index'
}
});
require(['index']);requireJS 通過 require([]) 方法去載入模塊，並執行模塊中的回調函數，其值是一個數組，數組中的元素便是要載入的模塊名稱也就是模塊ID，這裏我們通過 require(['index']) 方法載入了 index 這個模塊，又因爲該模塊依賴了 jquery 模塊，所以接着便會繼續載入jquery模塊，當jquery模塊加載完成後，便會將自身的方法傳遞給形參 $ 最後執行模塊的回調方法，alert出$參數具體內容
六、模塊的返回值
require中定義的模塊不僅可以返回一個對象作爲結果，還可以返回一個函數作爲結果。
// 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 返回多種結果的情況下：
// 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');
})這裏有一個注意的地方，那就是非依賴性的模塊，可以直接在模塊的回調函數中，加入以下三個參數：
- require:加載模塊時使用。
- exports:導出模塊的返回值。
- modules:定義模塊的相關信息以及參數。
總結：
1、在首頁通過<script src="js/require.js"></script>引入require.js
2、通過define([id,deps,] callback);定義模塊，
- ID:模塊的ID，默認的便是文件名，一般無需使用者自己手動指定。即ID不用管
- deps:當前模塊所以依賴的模塊數組，數組的每個數組元素便是模塊名或者叫模塊ID。
- callback:模塊的回調方法，用於保存模塊具體的功能與代碼，而這個回調函數又接收一個或者多個參數，這些參數會與模塊數組的每個數組元素一一對應，即每個參數保存的是對應模塊返回值。
- 模塊的返回值
3、通過require.config配置模塊的路徑，
4、通過require(deps[,callback]);引入模塊
- deps:所要載入的模塊數組。
- callback:模塊載入後執行的回調方法。