requireJS官网学习（1）

1.加载 JavaScript 文件

RequireJS的目标是鼓励代码的模块化，可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层

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

如果没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。

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

以 ".js" 结束.
以 "/" 开始.
包含 URL 协议, 如 "http:" or "https:".

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

- www/
- index.html
- js/
-  app/
- sub.js
- lib/
- jquery.js
-  canvas.js
- app.js

index.html:

<script data-main="js/app.js" src="js/require.js"></script>

app.js:

requirejs.config({
#默认加载url  js/lib
baseUrl: 'js/lib',

#配置相对的路径,可以是目录，也可以是http:// 的url
paths: {
app: '../app'
}
});

#加载相应的 js模块
requirejs(['jquery', 'canvas', 'app/sub'],
#注入模块的全局变量
function($,canvas,sub) {

#利用依赖模块的全局变量做一些事情……

});

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

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

data-main 入口点

require.js 在加载的时候会检察data-main 属性:

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

你可以在data-main指向的脚本中设置模板加载 选项，然后加载第一个应用模块。.注意：你在main.js中所设置的脚本是异步加载的。所以如果你在页面中配置了其它JS加载，则不能保证它们所依赖的JS已经加载成功。

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

##不能保证它所依赖的JS也加载成功。
<script src="scripts/other.js"></script>

main.js:

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

other.js: 依赖于main.js中的js

require( ['foo'], function( foo ) {

//do something……
});

定义模块

模块不同于传统的脚本文件，**它良好地定义了一个作用域来避免全局名称空间污染。它可以显式地列出其依赖关系，并以函数(定义此模块的那个函数)参数的形式将这些依赖进行注入，而无需引用全局变量。**RequireJS的模块是模块模式的一个扩展，其好处是无需全局地引用其他模块。

RequireJS的模块语法允许它尽快地加载多个模块，虽然加载的顺序不定，但依赖的顺序最终是正确的。同时因为无需创建全局变量，甚至可以做到在同一个页面上同时加载同一模块的不同版本。

1.（简单的值对）如果一个模块仅含值对，没有任何依赖，则在define()中定义这些值对就好了：

define({
color: "black",
size: "unisize"
});

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

define(function () {
//做一些设置工作

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

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

//定义的模块需要依赖于其它的js库
define(["./cart", "./inventory"], function(cart, inventory) {

//返回定义模块的对象,这样该模块不作为一个全局变量而存在。
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"名称指定的模块。在这两个模块加载完毕之前，shirt模块函数不会被调用

返回的object定义了"my/shirt"模块。这种定义模式下，"my/shirt"不作为一个全局变量而存在。
*/