require.js 的基本用途

data-main入口点§1.2

<!--whenrequire.jsloadsitwillinjectanotherscripttag
(withasyncattribute)forscripts/main.js-->
<scriptdata-main="scripts/main"src="scripts/require.js"></script>

<scriptdata-main="scripts/main"src="scripts/require.js"></script>
<scriptsrc="scripts/other.js"></script>

//contentsofmain.js:
require.config({
paths:{
foo:'libs/foo-1.1.3'
}
});

//contentsofother.js:

//Thiscodemightbecalledbeforetherequire.config()inmain.js
//hasexecuted.Whenthathappens,require.jswillattemptto
//load'scripts/foo.js'insteadof'scripts/libs/foo-1.1.3.js'
require(['foo'],function(foo){

});

定义模块§1.3

简单的值对§1.3.1

//Insidefilemy/shirt.js:
define({
color:"black",
size:"unisize"
});

函数式定义§1.3.2

//my/shirt.jsnowdoessetupwork
//beforereturningitsmoduledefinition.
define(function(){
//Dosetupworkhere

return{
color:"black",
size:"unisize"
}
});

存在依赖的函数式定义§1.3.3

//my/shirt.jsnowhassomedependencies,acartandinventory
//moduleinthesamedirectoryasshirt.js
define(["./cart","./inventory"],function(cart,inventory){
//returnanobjecttodefinethe"my/shirt"module.
return{
color:"blue",
size:"large",
addToCart:function(){
inventory.decrement(this);
cart.add(this);
}
}
}
);

将模块定义为一个函数§1.3.4

//Amoduledefinitioninsidefoo/title.js.Ituses
//my/cartandmy/inventorymodulesfrombefore,
//butsincefoo/title.jsisinadifferentdirectorythan
//the"my"modules,itusesthe"my"inthemoduledependency
//nametofindthem.The"my"partofthenamecanbemapped
//toanydirectory,butbydefault,itisassumedtobea
//siblingtothe"foo"directory.
define(["my/cart","my/inventory"],
function(cart,inventory){
//returnafunctiontodefine"foo/title".
//Itgetsorsetsthewindowtitle.
returnfunction(title){
returntitle?(window.title=title):
inventory.storeName+''+cart.name;
}
}
);

简单包装CommonJS来定义模块§1.3.5

define(function(require,exports,module){
vara=require('a'),
b=require('b');

//Returnthemodulevalue
returnfunction(){};
}
);

定义一个命名模块§1.3.6

//Explicitlydefinesthe"foo/title"module:
define("foo/title",
["my/cart","my/inventory"],
function(cart,inventory){
//Definefoo/titleobjectinhere.
}
);

其他注意事项§1.3.7

define(["require","./relative/name"],function(require){
varmod=require("./relative/name");
});

define(function(require){
varmod=require("./relative/name");
});

define(["require"],function(require){
varcssUrl=require.toUrl("./style.css");
});

require("module/name").callSomeFunction()

循环依赖§1.3.8

//Insideb.js:
define(["require","a"],
function(require,a){
//"a"inthiscasewillbenullifaalsoaskedforb,
//acirculardependency.
returnfunction(title){
returnrequire("a").doSomething();
}
}
);

//Insideb.js:
define(function(require,exports,module){
//If"a"hasusedexports,thenwehaveareal
//objectreferencehere.However,wecannotuse
//anyofa'spropertiesuntilafterbreturnsavalue.
vara=require("a");

exports.foo=function(){
returna.bar();
};
});

//Insideb.js:
define(['a','exports'],function(a,exports){
//If"a"hasusedexports,thenwehaveareal
//objectreferencehere.However,wecannotuse
//anyofa'spropertiesuntilafterbreturnsavalue.

exports.foo=function(){
returna.bar();
};
});

JSONP服务依赖§1.3.9

require(["http://example.com/api/data.json?callback=define"],
function(data){
//ThedataobjectwillbetheAPIresponseforthe
//JSONPdatacall.
console.log(data);
}
);

UndefiningaModule§1.3.10

机制§2

配置选配§3

<scriptsrc="scripts/require.js"></script>
<script>
require.config({
baseUrl:"/another/path",
paths:{
"some":"some/v1.0"
},
waitSeconds:15
});
require(["some/module","my/module","a.js","b.js"],
function(someModule,myModule){
//Thisfunctionwillbecalledwhenallthedependencies
//listedaboveareloaded.Notethatthisfunctioncould
//becalledbeforethepageisloaded.
//Thiscallbackisoptional.
}
);
</script>

<script>
varrequire={
deps:["some/module1","my/module2","a.js","b.js"],
callback:function(module1,module2){
//Thisfunctionwillbecalledwhenallthedependencies
//listedaboveindepsareloaded.Notethatthis
//functioncouldbecalledbeforethepageisloaded.
//Thiscallbackisoptional.
}
};
</script>
<scriptsrc="scripts/require.js"></script>

requirejs.config({
bundles:{
'primary':['main','util','text','text!template.html'],
'secondary':['text!secondary.html']
}
});

require(['util','text'],function(util,text){
//ThescriptformoduleID'primary'wasloaded,
//andthatscriptincludedthedefine()'d
//modulesfor'util'and'text'
});

requirejs.config({
//Remember:onlyuseshimconfigfornon-AMDscripts,
//scriptsthatdonotalreadycalldefine().Theshim
//configwillnotworkcorrectlyifusedonAMDscripts,
//inparticular,theexportsandinitconfigwillnot
//betriggered,andthedepsconfigwillbeconfusing
//forthosecases.
shim:{
'backbone':{
//Thesescriptdependenciesshouldbeloadedbeforeloading
//backbone.js
deps:['underscore','jquery'],
//Onceloaded,usetheglobal'Backbone'asthe
//modulevalue.
exports:'Backbone'
},
'underscore':{
exports:'_'
},
'foo':{
deps:['bar'],
exports:'Foo',
init:function(bar){
//UsingafunctionallowsyoutocallnoConflictfor
//librariesthatsupportit,anddoothercleanup.
//However,pluginsforthoselibrariesmaystillwant
//aglobal."this"forthefunctionwillbetheglobal
//object.Thedependencieswillbepassedinas
//functionarguments.Ifthisfunctionreturnsavalue,
//thenthatvalueisusedasthemoduleexportvalue
//insteadoftheobjectfoundviathe'exports'string.
//Note:jQueryregistersasanAMDmoduleviadefine(),
//sothiswillnotworkforjQuery.Seenotessection
//belowforanapproachforjQuery.
returnthis.Foo.noConflict();
}
}
}
});

//Then,laterinaseparatefile,callit'MyModel.js',amoduleis
//defined,specifying'backbone'asadependency.RequireJSwilluse
//theshimconfigtoproperlyload'backbone'andgivealocal
//referencetothismodule.TheglobalBackbonewillstillexiston
//thepagetoo.
define(['backbone'],function(Backbone){
returnBackbone.Model.extend({});
});

requirejs.config({
shim:{
'jquery.colorize':['jquery'],
'jquery.scroll':['jquery'],
'backbone.layoutmanager':['backbone']
}
});

requirejs.config({
shim:{
'jquery.colorize':{
deps:['jquery'],
exports:'jQuery.fn.colorize'
},
'jquery.scroll':{
deps:['jquery'],
exports:'jQuery.fn.scroll'
},
'backbone.layoutmanager':{
deps:['backbone']
exports:'Backbone.LayoutManager'
}
}
});

requirejs.config({
map:{
'some/newmodule':{
'foo':'foo1.2'
},
'some/oldmodule':{
'foo':'foo1.0'
}
}
});

requirejs.config({
map:{
'*':{
'foo':'foo1.2'
},
'some/oldmodule':{
'foo':'foo1.0'
}
}
});

requirejs.config({
config:{
'bar':{
size:'large'
},
'baz':{
color:'blue'
}
}
});

//bar.js,whichusessimplifiedCJSwrapping:
//http://requirejs.org/docs/whyamd.html#sugar
define(function(require,exports,module){
//Willbethevalue'large'
varsize=module.config().size;
});

//baz.jswhichusesadependencyarray,
//itasksforthespecialmoduleID,'module':
//https://github.com/jrburke/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#wiki-magic
define(['module'],function(module){
//Willbethevalue'blue'
varcolor=module.config().color;
});

requirejs.config({
//PassanAPIkeyforuseinthepixiepackage's
//mainmodule.
config:{
'pixie/index':{
apiKey:'XJKDLNS'
}
},
//Setupconfigforthe"pixie"package,whosemain
//moduleistheindex.jsfileinthepixiefolder.
packages:[
{
name:'pixie',
main:'index'
}
]
});

urlArgs:"bust="+(newDate()).getTime()

<scriptdata-main="scripts/main"src="scripts/require.js"></script>

//main.jscontents
//Passaconfigobjecttorequire
require.config({
"packages":["cart","store"]
});

require(["cart","store","store/util"],
function(cart,store,util){
//usethemodulesasusual.
});

require.config({
packages:[
"cart",
{
name:"store",
main:"store"
}
]
});

<scriptsrc="../require.js"></script>
<script>
varreqOne=require.config({
context:"version1",
baseUrl:"version1"
});

reqOne(["require","alpha","beta",],
function(require,alpha,beta){
log("alphaversionis:"+alpha.version);//prints1
log("betaversionis:"+beta.version);//prints1

setTimeout(function(){
require(["omega"],
function(omega){
log("version1omegaloadedwithversion:"+
omega.version);//prints1
}
);
},100);
});

varreqTwo=require.config({
context:"version2",
baseUrl:"version2"
});

reqTwo(["require","alpha","beta"],
function(require,alpha,beta){
log("alphaversionis:"+alpha.version);//prints2
log("betaversionis:"+beta.version);//prints2

setTimeout(function(){
require(["omega"],
function(omega){
log("version2omegaloadedwithversion:"+
omega.version);//prints2
}
);
},100);
});
</script>

requirejs.config({
enforceDefine:true,
paths:{
jquery:'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min'
}
});

//Later
require(['jquery'],function($){
//Dosomethingwith$here
},function(err){
//Theerrback,errorcallback
//Theerrorhasalistofmodulesthatfailed
varfailedId=err.requireModules&&err.requireModules[0];
if(failedId==='jquery'){
//undefisfunctiononlyontheglobalrequirejsobject.
//UseittoclearinternalknowledgeofjQuery.Anymodules
//thatweredependentonjQueryandinthemiddleofloading
//willnotbeloadedyet,theywillwaituntilavalidjQuery
//doesload.
requirejs.undef(failedId);

//SetthepathtojQuerytolocalpath
requirejs.config({
paths:{
jquery:'local/jquery'
}
});

//Tryagain.Notethattheaboverequirecallback
//withthe"Dosomethingwith$here"commentwill
//becalledifthisnewattempttoloadjQuerysucceeds.
require(['jquery'],function(){});
}else{
//Someothererror.Maybeshowmessagetotheuser.
}
});

requirejs.config({
//Togettimely,correcterrortriggersinIE,forceadefine/shimexportscheck.
enforceDefine:true,
paths:{
jquery:[
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
//IftheCDNlocationfails,loadfromthislocation
'lib/jquery'
]
}
});

//Later
require(['jquery'],function($){
});

requirejs.onError=function(err){
console.log(err.requireType);
if(err.requireType==='timeout'){
console.log('modules:'+err.requireModules);
}

throwerr;
};

require(['domReady'],function(domReady){
domReady(function(){
//ThisfunctioniscalledoncetheDOMisready.
//ItwillbesafetoquerytheDOMandmanipulate
//DOMnodesinthisfunction.
});
});

require(['domReady!'],function(doc){
//ThisfunctioniscalledoncetheDOMisready,
//noticethevaluefor'domReady!'isthecurrent
//document.
});

//my/nls/colors.jscontents:
define({
"root":{
"red":"red",
"blue":"blue",
"green":"green"
}
});

//Contentsofmy/lamps.js
define(["i18n!my/nls/colors"],function(colors){
return{
testMessage:"Thenameforredinthislocaleis:"+colors.red
}
});

//Contentsofmy/nls/colors.js
define({
"root":{
"red":"red",
"blue":"blue",
"green":"green"
},
"fr-fr":true
});

//Contentsofmy/nls/fr-fr/colors.js
define({
"red":"rouge",
"blue":"bleu",
"green":"vert"
});

requirejs.config({
config:{
//Settheconfigforthei18n
//moduleID
i18n:{
locale:'fr-fr'
}
}
});

//Contentsofmy/nls/fr-fr/colors.js
define({
"blue":"bleu",
"green":"vert"
});

//my/nls/colors.jscontents:
define({
"root":true,
"fr-fr":true,
"fr-fr-paris":true
});

//Contentsofmy/nls/root/colors.js
define({
"red":"red",
"blue":"blue",
"green":"green"
});