RequireJS 學習筆記(一)
RequireJS是一個非常小巧的JavaScript模塊載入框架，是AMD規範最好的實現者之一。
RequireJS是一個JavaScript文件和模塊加載器。requireJS允許你把你的javascript代碼獨立成文件和模塊，同時管理每個模塊間的依賴關係。
主要目的還是爲了代碼的模塊化。解決了兩個問題:
（1）實現js文件的異步加載，避免網頁失去響應；
（2）管理模塊之間的依賴性，便於代碼的編寫和維護。
1.基本API
require會定義三個變量：define,require,requirejs，其中require === requirejs，一般使用require更簡短。
- define 用來定義一個模塊
- require 加載依賴模塊，並執行加載完後的回調函數
- config該函數用於配置RequireJS.
例如，define函數定義了一個模塊，然後再頁面中使用：
//a.js
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
//index.js
require(["js/a"],function(){
alert("load finished");
})注意:require中的依賴是一個數組，即使只有一個依賴，你也必須使用數組來定義.
requir API的第二個參數是callback，一個function，是用來處理加載完畢後的邏輯.
2.加載JS文件
它鼓勵在使用腳本時以module ID替代URL地址，以一個相對於baseUrl的地址來加載所有的代碼
RequireJS默認假定所有的依賴資源都是js腳本，因此無需在module ID上再加”.js”後綴，RequireJS在進行module ID到path的解析時會自動補上後綴。
例如，要麼將所有的腳本都放置到baseUrl中，要麼分置爲項目庫/第三方庫的一個扁平結構：
//index.html
<script data-main="js/app.js" src="js/require.js"></script>
//app.js
requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
}
});
requirejs(['jquery', 'canvas', 'app/sub'],function($,canvas,sub) {
});require函數用於加載模塊依賴但並不會創建一個模塊。
3.data-main入口點
require.js 在加載的時候會檢察data-main 屬性。require.js使用它來啓動腳本加載過程。
data-main需要給所有的腳本文件設置一個根路徑。根據這個根路徑，RequireJS將會去加載所有相關的模塊。
4.定義模塊
模塊不同於傳統的腳本文件，它良好地定義了一個作用域來避免全局名稱空間污染。它可以顯式地列出其依賴關係，並以函數(定義此模塊的那個函數)參數的形式將這些依賴進行注入。
4.1 存在依懶關係的函數定義
如果模塊存在依賴：則第一個參數是依賴的名稱數組；第二個參數是函數，在模塊的所有依賴加載完畢後，該函數會被調用來定義該模塊。
依賴關係會以參數的形式注入到該函數上，參數列表與依賴名稱列表一 一對應。
define(["./cart", "./inventory"], function(cart, inventory) {
//return an object to define the "my/shirt" module.
return {
color: "blue",
size: "large",
addToCart: function() {
inventory.decrement(this);
cart.add(this);
}
}
}
);5.shim
通過require加載的模塊一般都需要符合AMD規範(使用define來申明模塊)，但是部分時候需要加載非AMD規範的js，這時候就需要用到另一個功能：shim。專門用來配置不兼容的模塊。
具體來說，每個模塊要定義：
（1）exports值（輸出的變量名），表明這個模塊外部調用時的名稱；
（2）deps數組，表明該模塊的依賴性。
require.config({
shim: {
"underscore" : {
exports : "_";
},
"jquery.form" : {
deps : ["jquery"]
}
}
})6.require.config配置函數
- baseUrl——用於加載模塊的根路徑。
- paths——用於映射不存在根路徑下面的模塊路徑。
- shims——配置在腳本/模塊外面並沒有使用RequireJS的函數依賴並且初始化函數。假設underscore並沒有使用 RequireJS定義，但是你還是想通過RequireJS來使用它，那麼你就需要在配置中把它定義爲一個shim。
- deps——加載依賴關係數組