之前有介绍过requireJS(模块化开发),可以看看 ，但是不详细，所以今天参考官网来详细介绍一下:

1.加载js文件：

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

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

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

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

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

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

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

以 ".js" 结束.

以 "http://www.mamicode.com/" 开始.

包含 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="http://www.mamicode.com/js/require.js"></script>

app.js:

requirejs.config({ //默认的相对加载路径 baseUrl: ‘js/lib‘, paths: { app: ‘../app‘ } });

requirejs([‘jquery‘, ‘canvas‘, ‘app/sub‘], function ($, canvas, sub) { //加载成功后执行的函数 });

2.data-main 入口点:

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

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

3.定义模块:

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

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

(如果你熟悉ConmmonJS，可参看CommonJS的注释信息以了解RequireJS模块到CommonJS模块的映射关系)。(----不好意思。我还没研究ConmmonJS,期待下一次的学习喽！！)

一个磁盘文件应该只定义 1 个模块。多个模块可以使用内置优化工具将其组织打包。

（1）简单的值对：

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

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

（2）函数式定义：

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

//before returning its module definition. define(function () { //Do setup work here return { color: "black", size: "unisize" } });

（3）存在依赖的函数式定义：