Requirejs簡介
AMD是”Asynchronous Module Definition”的縮寫，意思就是”異步模塊定義”。它採用異步方式加載模塊，模塊的加載不影響它後面語句的運行。RequireJS就是AMD規範最好的實現者之一。使用RequireJS有以下幾點優勢：
避免命名衝突，閉包，匿名自執行函數， 模塊化只向外面暴露該模塊的接口。
更好的分離。一堆script腳本，html中只需引入一個主入口就好了。然後在依賴進來。
更好的組織代碼，大型項目的維護，多人開發，代碼風格不一樣，業務邏輯混雜，一個文件一個模塊。單一職責原則，體現OOP思想。
更好的依賴管理，可以很好的維護各個模塊之間的依賴關係。
按需加載，需要什麼功能就加載什麼模塊。
防止js加載阻塞頁面渲染。 Requirejs是異步加載的，可防止Js中有alert()阻塞頁面渲染;
主入口data-main
require.js 在加載的時候會檢察data-main 屬性，將data-main 屬性的js文件作爲主入口進行加載：
<script data-main="scripts/main" src="scripts/require.js"></script>這時會將main.js文件作爲主要入口，通過main.js文檔中設置其他的腳本進行加載，由於requirejs默認加載的js文檔，因此可以省略main.js的後綴，直接寫成main。需要注意的是main中的腳本是異步加載的。所以如果你在頁面中配置了其它JS加載，則不能保證它們所依賴的JS已經加載成功。
例如：
<script data-main="scripts/main" src="scripts/require.js"></script>
<script src="scripts/other.js"></script>
如果other.js有依賴到main中設置加載的a.js文件，則不能保證加載other.js時a.js已經加載完成。
路徑設置
RequireJS以一個相對於baseUrl的地址來加載所有的代碼。 頁面頂層<script>標籤含有一個特殊的屬性data-main，require.js使用它來啓動腳本加載過程，而baseUrl默認與該屬性相一致的目錄。
當然我們也可以在主入口main文檔中通過require.config來設置，我們通常需要用到require.config來設置的有（1）baseUrl；（2）paths；
先看第一個例子：
文檔結構如下：
www/
• index.html
• js/
• app/
• sub.js
• lib/
• jquery.js
• canvas.js
• app.js
• main.js
main.js設置如下：
requirejs.config({
baseUrl: 'js/lib',
paths: {
app: '../app'
}
});
requirejs(['jquery', 'canvas', 'app/sub'],
function ($,cv, sb) {
// jQuery, canvas and the app/sub module are all
// loaded and can be used here now.
});
baseUrl設置爲js/lib，因此下面的paths設置的路徑都是相對於上面的baseUrl的相對路徑，當然也可以寫絕對路徑。這裏需要的是這裏的 app: ‘../app’ 沒有加js後綴，因此可以是js文件，也可以是一個路徑。
上面例子中的callback函數中發現有$參數，這個就是依賴的jquery模塊的輸出變量，cv, sb 分別對應。
第二個例子：
require.config({
paths : {
jquery : ["http://libs.baidu.com/jquery/2.0.3/jquery", " jquery-1.10.2"],
jqueryUI : " http://code.jquery.com/ui/1.10.4/jquery-ui"
}
})
通過paths的配置會使我們的模塊名字更精煉，paths還有一個重要的功能，就是可以配置多個路徑，如果遠程cdn庫沒有加載成功，可以加載本地的庫。
定義模塊
模塊不同於傳統的腳本文件，它良好地定義了一個作用域來避免全局名稱空間污染。它可以顯式地列出其依賴關係，並以函數(定義此模塊的那個函數)參數的形式將這些依賴進行注入，而無需引用全局變量。
Requirejs 通過define來定義一個模塊，我們常用到定義模塊的方式有兩種：一種是沒有其他依賴，另外一種是依賴其他模塊。
1、沒有其他依賴
如果一個模塊不依賴其他模塊，那麼可以直接定義在define()函數之中。假定現在有一個add.js文件，它定義了一個add模塊。那麼，add.js就要這樣寫：
// add.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
result: add
};
});
2、存在其他依賴
如果模塊存在依賴：則第一個參數是依賴的名稱數組；第二個參數是函數，該函數的參數列表與依賴名稱列表一一對應。在模塊的所有依賴加載完畢後，該函數會被調用來定義該模塊，因此該模塊應該返回一個定義了本模塊的object。
define(["foo1", "foo2"], function(f1, f2) {
return {
color: "blue",
size: "large",
FOO: function() {
f1.dosomething;
f2.dosomething;
}
}
}
);
加載非規範的模塊
理論上，require.js加載的模塊，必須是按照AMD規範、用define()函數定義的模塊。但是實際上，雖然已經有一部分流行的函數庫（比如jQuery）符合AMD規範，更多的庫並不符合。那麼，怎麼通過require.js來加載非規範的模塊呢？
如果需要使用非規範的模塊，就需要通過設置require.config()的shim屬性，專門用來配置不兼容的模塊。具體來說，每個模塊要定義（1）exports值（輸出的變量名），表明這個模塊外部調用時的名稱；（2）deps數組，表明該模塊的依賴性。
例如現在需要引入非規範模塊backbone.js、jquery.scroll.js，可以進行如下配置：
require.config({
shim: {
'backbone': {
exports: 'Backbone'
},
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
}
}
});
通過上面的配置，我們就可以使用對應的非規範模塊了：
require.config(["jquery", " jQuery.fn.scroll", " Backbone"], function($,jfs,Bb){
dosomething;
})