RequireJS 加载javascript文件

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签脚本加载步骤。可以用它回事、优化代码，但其主要的目的还是为了代码的模块化。它鼓励在使用脚本以moudle ID替代URL地址。

RequireJS以一个相对于baseUrl的地址来加载所有的代码。页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。下列示例中展示了baseUrl的设置。

<!—将baseUrl设置到”scripts”目录，并且加载module ID 为’main’的一个脚本--->

<script data-main=”script/main.js” src= “scripts/require.js”></script>

baseUrl也可以通过RequrieJS config拖动设置。如果没有显示指定config及data-main，则默认的baseUrl为包含RequireJS的html页面所在目录。

requireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上加载”.js”后缀，RequireJS在进行module ID到path的解析时会自动补上后缀。你可以通过paths config设置一组脚本，这些有助于我们在使用脚本时写更少的字。

有时候你想避开“baseUrl+paths”的解析过程，而是直接指定加载某一个目录下的脚本。此时可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的的“baseUrl+paths”配置，而是直接将其加载为一个相对于当前html文档的脚本：

n  以“.js”结尾；

n  以“/”开头；

n  包含URL协议，“http:”，”https:”；

一般来说，最好还是使用baseUrl及”path” config去设置module ID。它会给你带来额外灵活性，如便于脚本的重命名、重定位。同时，为了避免凌乱的配置，最好不要使用多级嵌套目录层次来组织代码，而是要么将所有的脚本都放置到baseUrl中，要么分置为项目库/第三方库的一个扁平结构，如下：

www/

index.html

js/

app/

sub.js

lib/

jquery.js

canvas.js

app.js

require.js

在index.html中：

<script data-main=”js/app.js” src=http://www.mamicode.com/”js/require.js”></script>

在app.js中：

requirejs.config({

//默认从js/lib加载所有的module ID

baseUrl:’js/lib’,

//除非，module ID以“app”开关，否则从js/app目录加载。

//注意path,config是相对于baseUrl的，

//而且不要包含”.js”的后缀，因为一个path

//有可能是个目标

paths:{

app:’../app’

}

});

//启动main app

requirejs([‘jquery’,’canvas’,’app/sub’],function($,canvas,sub){

自此，jQuery,canvas以及app/sub模块都已加载并开始使用了

});

注意在示例中，三方库如jQuery没有将版本号包含在他们的文件名中。我们建议版本信息放置在单独的文件中来进行跟踪。使用诸如volo这类的工具，可以将package.json打上版本信息，并在磁盘上保持文件我为“jquery.js”。这有助于你保持配置的最小化，避免为每个库版本设置一条path。

理想状况下，每个加载的脚本都是通过define()来定义的一个模块；但这些“浏览器全局变量注入”型的传统/遗留库并没有使用define()来定义它们的依赖关系，你必须为此使用shim config来指明它们的依赖关系。如果你没有指明依赖关系，加载可能报错。这是因为基于速度的原因，RequireJS会异步地以无序的形式加载这些库。

定义模块

模块不同于传统的脚本文件，它良好地定义了一个作用域避免全局名称空间的污染。它可以显式地列出其依赖关系，并以函数参数的形式将这些依赖进行注入，而无需引用全局变量。RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其它模块。RequireJS的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。同时因为无需创建全局变量，甚至可以做到在同一个页面上同时加载同一模块的不同版本。

多个模块可以使用内置优化工具（optimization）将其组织打包。

简单的值对

define({color:”block”,size:”unisize”});

函数式定义

如果一个模块没有任何依赖，但是需要一个做setup工作的函数，则在define()中定义该函数，并将其传给define():

define(function(){

//Do setup work here

return {

color:”black”,

size:”unisize”

}

})

存在依赖的函数式定义

如果模块存在依赖：则第一个参数是依赖的名称数组；第二个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块，因此该模块应该返回一个定义了本模块的object。依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表-----对应。

//my/shirt.js现在对同目录下的cart及inventory存在依赖

define([‘./cart’,’./inventory’],function(cart,inventory){

//返回一个定义了该”my/shirt”模块的object

retrun {

color:”blue”,

size:”large”,

addToCart:function(){

inventory.decrement(this);

cart.add(this)

}

}

});