RequireJS是一個(gè)工具庫，主要用于客戶(hù)端的模塊管理。它可以讓客戶(hù)端的代碼分成一個(gè)個(gè)模塊，實(shí)現異步或動(dòng)態(tài)加載，從而提高代碼的性能和可維護性。它的模塊管理遵守AMD規范（Asynchronous Module Definition）。
RequireJS的基本思想是，通過(guò)define方法，將代碼定義為模塊；通過(guò)require方法，實(shí)現代碼的模塊加載。
首先，將require.js嵌入網(wǎng)頁(yè)，然后就能在網(wǎng)頁(yè)中進(jìn)行模塊化編程了。
<script data-main="scripts/main" src="scripts/require.js"></script>上面代碼的data-main屬性不可省略，用于指定主代碼所在的腳本文件，在上例中為scripts子目錄下的main.js文件。用戶(hù)自定義的代碼就放在這個(gè)main.js文件中。
define方法用于定義模塊，RequireJS要求每個(gè)模塊放在一個(gè)單獨的文件里。
按照是否依賴(lài)其他模塊，可以分成兩種情況討論。第一種情況是定義獨立模塊，即所定義的模塊不依賴(lài)其他模塊；第二種情況是定義非獨立模塊，即所定義的模塊依賴(lài)于其他模塊。
（1）獨立模塊
如果被定義的模塊是一個(gè)獨立模塊，不需要依賴(lài)任何其他模塊，可以直接用define方法生成。
define({ method1: function() {}, method2: function() {},});上面代碼生成了一個(gè)擁有method1、method2兩個(gè)方法的模塊。
另一種等價(jià)的寫(xiě)法是，把對象寫(xiě)成一個(gè)函數，該函數的返回值就是輸出的模塊。
define(function () { return { method1: function() {}, method2: function() {}, };});后一種寫(xiě)法的自由度更高一點(diǎn)，可以在函數體內寫(xiě)一些模塊初始化代碼。
值得指出的是，define定義的模塊可以返回任何值，不限于對象。
（2）非獨立模塊
如果被定義的模塊需要依賴(lài)其他模塊，則define方法必須采用下面的格式。
define(['module1', 'module2'], function(m1, m2) { ...});define方法的第一個(gè)參數是一個(gè)數組，它的成員是當前模塊所依賴(lài)的模塊。比如，['module1', 'module2']表示我們定義的這個(gè)新模塊依賴(lài)于module1模塊和module2模塊，只有先加載這兩個(gè)模塊，新模塊才能正常運行。一般情況下，module1模塊和module2模塊指的是，當前目錄下的module1.js文件和module2.js文件，等同于寫(xiě)成['./module1', './module2']。
define方法的第二個(gè)參數是一個(gè)函數，當前面數組的所有成員加載成功后，它將被調用。它的參數與數組的成員一一對應，比如function(m1, m2)就表示，這個(gè)函數的第一個(gè)參數m1對應module1模塊，第二個(gè)參數m2對應module2模塊。這個(gè)函數必須返回一個(gè)對象，供其他模塊調用。
define(['module1', 'module2'], function(m1, m2) { return { method: function() { m1.methodA(); m2.methodB(); } };});上面代碼表示新模塊返回一個(gè)對象，該對象的method方法就是外部調用的接口，menthod方法內部調用了m1模塊的methodA方法和m2模塊的methodB方法。
需要注意的是，回調函數必須返回一個(gè)對象，這個(gè)對象就是你定義的模塊。
如果依賴(lài)的模塊很多，參數與模塊一一對應的寫(xiě)法非常麻煩。
define( [ 'dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'], function(dep1, dep2, dep3, dep4, dep5, dep6, dep7, dep8){ ... });為了避免像上面代碼那樣繁瑣的寫(xiě)法，RequireJS提供一種更簡(jiǎn)單的寫(xiě)法。
define( function (require) { var dep1 = require('dep1'), dep2 = require('dep2'), dep3 = require('dep3'), dep4 = require('dep4'), dep5 = require('dep5'), dep6 = require('dep6'), dep7 = require('dep7'), dep8 = require('dep8'); ... }});下面是一個(gè)define實(shí)際運用的例子。
define(['math', 'graph'], function ( math, graph ) { return { plot: function(x, y){ return graph.drawPie(math.randomGrid(x,y)); } } };);上面代碼定義的模塊依賴(lài)math和graph兩個(gè)庫，然后返回一個(gè)具有plot接口的對象。
另一個(gè)實(shí)際的例子是，通過(guò)判斷瀏覽器是否為IE，而選擇加載zepto或jQuery。
define(('__proto__' in {} ? ['zepto'] : ['jquery']), function($) { return $;});上面代碼定義了一個(gè)中間模塊，該模塊先判斷瀏覽器是否支持proto屬性（除了IE，其他瀏覽器都支持），如果返回true，就加載zepto庫，否則加載jQuery庫。
require方法用于調用模塊。它的參數與define方法類(lèi)似。
require(['foo', 'bar'], function ( foo, bar ) { foo.doSomething();});上面方法表示加載foo和bar兩個(gè)模塊，當這兩個(gè)模塊都加載成功后，執行一個(gè)回調函數。該回調函數就用來(lái)完成具體的任務(wù)。
require方法的第一個(gè)參數，是一個(gè)表示依賴(lài)關(guān)系的數組。這個(gè)數組可以寫(xiě)得很靈活，請看下面的例子。
require( [ window.JSON ? undefined : 'util/json2' ], function ( JSON ) { JSON = JSON || window.JSON; console.log( JSON.parse( '{ "JSON" : "HERE" }' ) );});上面代碼加載JSON模塊時(shí)，首先判斷瀏覽器是否原生支持JSON對象。如果是的，則將undefined傳入回調函數，否則加載util目錄下的json2模塊。
require方法也可以用在define方法內部。
define(function (require) { var otherModule = require('otherModule');});下面的例子顯示了如何動(dòng)態(tài)加載模塊。
define(function ( require ) { var isReady = false, foobar; require(['foo', 'bar'], function (foo, bar) { isReady = true; foobar = foo() + bar(); }); return { isReady: isReady, foobar: foobar };});上面代碼所定義的模塊，內部加載了foo和bar兩個(gè)模塊，在沒(méi)有加載完成前，isReady屬性值為false，加載完成后就變成了true。因此，可以根據isReady屬性的值，決定下一步的動(dòng)作。
下面的例子是模塊的輸出結果是一個(gè)promise對象。
define(['lib/Deferred'], function( Deferred ){ var defer = new Deferred(); require(['lib/templates/?index.html','lib/data/?stats'], function( template, data ){ defer.resolve({ template: template, data:data }); } ); return defer.promise();});上面代碼的define方法返回一個(gè)promise對象，可以在該對象的then方法，指定下一步的動(dòng)作。
如果服務(wù)器端采用JSONP模式，則可以直接在require中調用，方法是指定JSONP的callback參數為define。
require( [ "http://someapi.com/foo?callback=define"], function (data) { console.log(data);});require方法允許添加第三個(gè)參數，即錯誤處理的回調函數。
require( [ "backbone" ], function ( Backbone ) { return Backbone.View.extend({ /* ... */ }); }, function (err) { // ... });require方法的第三個(gè)參數，即處理錯誤的回調函數，接受一個(gè)error對象作為參數。
require對象還允許指定一個(gè)全局性的Error事件的監聽(tīng)函數。所有沒(méi)有被上面的方法捕獲的錯誤，都會(huì )被觸發(fā)這個(gè)監聽(tīng)函數。
requirejs.onError = function (err) { // ...};define和require這兩個(gè)定義模塊、調用模塊的方法，合稱(chēng)為AMD模式。它的模塊定義的方法非常清晰，不會(huì )污染全局環(huán)境，能夠清楚地顯示依賴(lài)關(guān)系。
AMD模式可以用于瀏覽器環(huán)境，并且允許非同步加載模塊，也可以根據需要動(dòng)態(tài)加載模塊。
require方法本身也是一個(gè)對象，它帶有一個(gè)config方法，用來(lái)配置require.js運行參數。config方法接受一個(gè)對象作為參數。
require.config({ paths: { jquery: [ '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js', 'lib/jquery' ] }});config方法的參數對象有以下主要成員：
（1）paths
paths參數指定各個(gè)模塊的位置。這個(gè)位置可以是同一個(gè)服務(wù)器上的相對位置，也可以是外部網(wǎng)址?？梢詾槊總€(gè)模塊定義多個(gè)位置，如果第一個(gè)位置加載失敗，則加載第二個(gè)位置，上面的示例就表示如果CDN加載失敗，則加載服務(wù)器上的備用腳本。需要注意的是，指定本地文件路徑時(shí)，可以省略文件最后的js后綴名。
require(["jquery"], function($) { // ...});上面代碼加載jquery模塊，因為jquery的路徑已經(jīng)在paths參數中定義了，所以就會(huì )到事先設定的位置下載。
（2）baseUrl
baseUrl參數指定本地模塊位置的基準目錄，即本地模塊的路徑是相對于哪個(gè)目錄的。該屬性通常由require.js加載時(shí)的data-main屬性指定。
（3）shim
有些庫不是AMD兼容的，這時(shí)就需要指定shim屬性的值。shim可以理解成“墊片”，用來(lái)幫助require.js加載非AMD規范的庫。
require.config({ paths: { "backbone": "vendor/backbone", "underscore": "vendor/underscore" }, shim: { "backbone": { deps: [ "underscore" ], exports: "Backbone" }, "underscore": { exports: "_" } }});上面代碼中的backbone和underscore就是非AMD規范的庫。shim指定它們的依賴(lài)關(guān)系（backbone依賴(lài)于underscore），以及輸出符號（backbone為“Backbone”，underscore為“_”）。
RequireJS允許使用插件，加載各種格式的數據。完整的插件清單可以查看官方網(wǎng)站。
下面是插入文本數據所使用的text插件的例子。
define([ 'backbone', 'text!templates.html'], function( Backbone, template ){ // ...});上面代碼加載的第一個(gè)模塊是backbone，第二個(gè)模塊則是一個(gè)文本，用'text!'表示。該文本作為字符串，存放在回調函數的template變量中。
RequireJS提供一個(gè)基于node.js的命令行工具r.js，用來(lái)壓縮多個(gè)js文件。它的主要作用是將多個(gè)模塊文件壓縮合并成一個(gè)腳本文件，以減少網(wǎng)頁(yè)的HTTP請求數。
第一步是安裝r.js（假設已經(jīng)安裝了node.js）。
npm install -g requirejs然后，使用的時(shí)候，直接在命令行鍵入以下格式的命令。
node r.js -o <arguments><argument>表示命令運行時(shí)，所需要的一系列參數，比如像下面這樣：
node r.js -o baseUrl=. name=main out=main-built.js除了直接在命令行提供參數設置，也可以將參數寫(xiě)入一個(gè)文件，假定文件名為build.js。
({ baseUrl: ".", name: "main", out: "main-built.js"})然后，在命令行下用r.js運行這個(gè)參數文件，就OK了，不需要其他步驟了。
node r.js -o build.js下面是一個(gè)參數文件的范例，假定位置就在根目錄下，文件名為build.js。
({ appDir: './', baseUrl: './js', dir: './dist', modules: [ { name: 'main' } ], fileExclusionRegExp: /^(r|build)\.js$/, optimizeCss: 'standard', removeCombined: true, paths: { jquery: 'lib/jquery', underscore: 'lib/underscore', backbone: 'lib/backbone/backbone', backboneLocalstorage: 'lib/backbone/backbone.localStorage', text: 'lib/require/text' }, shim: { underscore: { exports: '_' }, backbone: { deps: [ 'underscore', 'jquery' ], exports: 'Backbone' }, backboneLocalstorage: { deps: ['backbone'], exports: 'Store' } }})上面代碼將多個(gè)模塊壓縮合并成一個(gè)main.js。
參數文件的主要成員解釋如下：
appDir：項目目錄，相對于參數文件的位置。
baseUrl：js文件的位置。
dir：輸出目錄。
modules：一個(gè)包含對象的數組，每個(gè)對象就是一個(gè)要被優(yōu)化的模塊。
fileExclusionRegExp：凡是匹配這個(gè)正則表達式的文件名，都不會(huì )被拷貝到輸出目錄。
optimizeCss: 自動(dòng)壓縮CSS文件，可取的值包括“none”, “standard”, “standard.keepLines”, “standard.keepComments”, “standard.keepComments.keepLines”。
removeCombined：如果為true，合并后的原文件將不保留在輸出目錄中。
paths：各個(gè)模塊的相對路徑，可以省略js后綴名。
shim：配置依賴(lài)性關(guān)系。如果某一個(gè)模塊不是AMD模式定義的，就可以用shim屬性指定模塊的依賴(lài)性關(guān)系和輸出值。
generateSourceMaps：是否要生成source map文件。
更詳細的解釋可以參考官方文檔。
運行優(yōu)化命令后，可以前往dist目錄查看優(yōu)化后的文件。
下面是另一個(gè)build.js的例子。
({ mainConfigFile : "js/main.js", baseUrl: "js", removeCombined: true, findNestedDependencies: true, dir: "dist", modules: [ { name: "main", exclude: [ "infrastructure" ] }, { name: "infrastructure" } ]})上面代碼將模塊文件壓縮合并成兩個(gè)文件，第一個(gè)是main.js（指定排除infrastructure.js），第二個(gè)則是infrastructure.js。
聯(lián)系客服
