RequireJSAPI

REQUIREJSAPI使用§1加载JavaScript文件§1.1RequireJS的目标是鼓励代码的模块化，它使用了不同于传统script标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以moduleID替代URL地址。RequireJS以一个相对于baseUrl的地址来加载所有的代码。页面顶层script标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。下列示例中展示了baseUrl的设置：!--ThissetsthebaseUrltothescriptsdirectory,andloadsascriptthatwillhaveamoduleIDof'main'--scriptdata-main=scripts/main.jssrc=scripts/require.js/scriptbaseUrl亦可通过RequireJSconfig手动设置。如果没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。RequireJS默认假定所有的依赖资源都是js脚本，因此无需在moduleID上再加.js后缀，RequireJS在进行moduleID到path的解析时会自动补上后缀。你可以通过pathsconfig设置一组脚本，这些有助于我们在使用脚本时码更少的字。有时候你想避开baseUrl+paths的解析过程，而是直接指定加载某一个目录下的脚本。此时可以这样做：如果一个moduleID符合下述规则之一，其ID解析会避开常规的baseUrl+paths配置，而是直接将其加载为一个相对于当前HTML文档的脚本：以.js结束.以/开始.包含URL协议,如http:orhttps:.一般来说，最好还是使用baseUrl及pathsconfig去设置moduleID。它会给你带来额外的灵活性，如便于脚本的重命名、重定位等。同时，为了避免凌乱的配置，最好不要使用多级嵌套的目录层次来组织代码，而是要么将所有的脚本都放置到baseUrl中，要么分置为项目库/第三方库的一个扁平结构，如下：index.htmljs/app/sub.jslib/jquery.jscanvas.jsapp.jsindex.html:scriptdata-main=js/app.jssrc=js/require.js/scriptapp.js:requirejs.config({//BydefaultloadanymoduleIDsfromjs/libbaseUrl:'js/lib',//except,ifthemoduleIDstartswithapp,//loaditfromthejs/appdirectory.paths//configisrelativetothebaseUrl,and//neverincludesa.jsextensionsince//thepathsconfigcouldbeforadirectory.paths:{app:'../app'}});//Startthemainapplogic.requirejs(['jquery','canvas','app/sub'],function($,canvas,sub){//jQuery,canvasandtheapp/submoduleareall//loadedandcanbeusedherenow.});注意在示例中，三方库如jQuery没有将版本号包含在他们的文件名中。我们建议将版本信息放置在单独的文件中来进行跟踪。使用诸如volo这类的工具，可以将package.json打上版本信息，并在磁盘上保持文件名为jquery.js。这有助于你保持配置的最小化，避免为每个库版本设置一条path。例如，将jquery配置为jquery-1.7.2。理想状况下，每个加载的脚本都是通过define()来定义的一个模块；但有些浏览器全局变量注入型的传统/遗留库并没有使用define()来定义它们的依赖关系，你必须为此使用shimconfig来指明它们的依赖关系。如果你没有指明依赖关系，加载可能报错。这是因为基于速度的原因，RequireJS会异步地以无序的形式加载这些库。data-main入口点§1.2require.js在加载的时候会检察data-main属性:!--whenrequire.jsloadsitwillinjectanotherscripttag(withasyncattribute)forscripts/main.js--scriptdata-main=scripts/mainsrc=scripts/require.js/script你可以在data-main指向的脚本中设置模板加载选项，然后加载第一个应用模块。.注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。例如：scriptdata-main=scripts/mainsrc=scripts/require.js/scriptscriptsrc=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模块不同于传统的脚本文件，它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入，而无需引用全局变量。RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其他模块。RequireJS的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。同时因为无需创建全局变量，甚至可以做到在同一个页面上同时加载同一模块的不同版本。(如果你熟悉ConmmonJS，可参看CommonJS的注释信息以了解RequireJS模块到CommonJS模块的映射关系)。一个磁盘文件应该只定义1个模块。多个模块可以使用内置优化工具将其组织打包。简单的值对§1.3.1如果一个模块仅含值对，没有任何依赖，则在define()中定义这些值对就好了：//Insidefilemy/shirt.js:define({color:black,size:unisize});函数式定义§1.3.2如果一个模块没有任何依赖，但需要一个做setup工作的函数，则在define()中定义该函数，并将其传给define()：//my/shirt.jsnowdoessetupwork//beforereturningitsmoduledefinition.define(function(){//Dosetupworkherereturn{color:black,size:unisize}});存在依赖的函数式定义§1.3.3如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块，因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表一一对应。//my/shirt.jsnowhassomedependencies,acartandinventory//moduleinthesamedirectoryasshirt.jsdefine([./cart,./inventory],function(cart,inventory){//returnanobjecttodefinethemy/shirtmodule.return{color:blue,size:large,addToCart:function(){inventory.decrement(this);cart.add(this);}}});本示例创建了一个my/shirt模块，它依赖于my/cart及my/inventory。磁盘上各文件分布如下：my/cart.jsmy/inventory.jsmy/shirt.js模块函数以参数cart及inventory使用这两个以./cart及./inventory名称指定的模块。在这两个模块加载完毕之前，模块函数不会被调用。严重不鼓励模块定义全局变量。遵循此处的定义模式，可以使得同一模块的不同版本并存于同一个页面上(参见高级用法)。另外，函参的顺序应与依赖顺序保存一致。返回的object定义了my/shirt模块。这种定义模式下，my/shirt不作为一个全局变量而存在。将模块定义为一个函数§1.3.4对模块的返回值类型并没有强制为一定是个object，任何函数的返回值都是允许的。此处是一个返回了函数的模块定义：//Amoduledefinitioninsidefoo/title.js.Ituses//my/cartandmy/inventorymodulesfrombefore,//butsincefoo/title.jsisinadifferentdirectorythan//themymodules,itusesthemyinthemoduledependency//nametofindthem.Themypartofthenamecanbemapped//toanydirectory,butbydefault,itisassumedtobea//siblingtothefoodirectory.define([my/cart,my/inventory],function(cart,inventory){//returnafunctiontodefinefoo/title.//Itgetsorsetsthewindowtitle.returnfunction(title){returntitle?(window.title=title):inventory.storeName+''+cart.name;}});简单包装CommonJS来定义模块§1.3.5如果你现有一些以CommonJS模块格式编写的代码，而这些代码难于使用上述依赖名称数组参数的形式来重构，你可以考虑直接将这些依赖对应到一些本地变量中进行使用。你可以使用一个CommonJS的简单包装来实现：define(function(require,exports,module){vara=require('a'),b=require('b');//Returnthemodulevaluereturnfunction(){};});该包装方法依靠Function.prototype.toString()将函数内容赋予一个有意义的字串值，但在一些设备如PS3及一些老的Opera手机浏览器中不起作用。考虑在这些设备上使用优化器将依赖导出为数组形式。更多的信息可参看CommonJSNotes页面，以及WhyAMD页面的Sugar段落。定义一个命名模块§1.3.6你可能会看到一些define()中包含了一个模块名称作为首个参数：//Explicitlydefinesthefoo/titlemodule:define(foo/title,[my