使用 requireJS 在同一个文件里定义多个模块的方法？

[sydneyzh]

最近扒网站 - palleton，
一个单页app，
主模块（requirejs的data-main指向的文件）app.compiled.js里面，
出现了这样的结构：

开头
http://i.imgur.com/cIEcXdz.png

结尾
http://i.imgur.com/8yUYHjo.png

定义了多个相互依赖的模块。
想问下这样的结构是什么原理？
（requirejs文档没有讲这种结构。
搜了下网上也只是说一个文件写一个模块，再用Optimizer来弄）

[Septembers]

https://gist.github.com/anonymous/34687d96207d838f1d79

BTW: 代码片段请发Gist，发图片阅读很麻烦

[Septembers]

https://gist.github.com/anonymous/e40b9fa2097bc52a35fc

[sydneyzh]

@Septembers gist被墙了。没开代理连这页的回复框都刷不出来。我还以为贴被封了。谢谢但回答没有帮助。

[sydneyzh]

这个文件貌似还就是optimization tool生成的

[eeeeeeve]

@sydneyzh 这种结构真难读懂啊

[iwege]

感觉应该是r.js 合并生成的。这一般是发布的时候build tools 来生成的代码。

[jsq2627]

要在同一个文件声明多个模块，就像 2L 说的一样，显式在 define 第一个参数指定模块名。文档里说是不推荐这么做的，而是统一约定一个文件一个模块，用文件名表示模块名。

楼主贴的这段代码是 Optimizer 生成的。它把每个文件的代码嵌入到了一个自调用里：
(function () {
// my-module-foo.js
}).call(this),
(function () {
// my-module-bar.js
}).call(this);

因为这时所有模块合并到了一个文件，没法用文件名做模块名了。所以 Optimizer 把原来的文件名加到了 define 第一个参数。
(function () {
// my-module-foo.js
define("my-module-foo", [], function { /* ... */ });
}).call(this),
(function () {
// my-module-bar.js
define("my-module-bar", [], function { /* ... */ });
}).call(this);

所以就有了这样的结构。

[latelx]

有时候一个模块里定义多个模块的需要还是有的，比如模板，一起作为一个目录给别人用总觉得怪怪的，这时候就有合并的需求。
我把主模块定义为匿名模块，模板定义为一个命名模块（有命名空间），然后匿名模块将模块依赖就可以了，requirejs会自动将匿名模块作为加载合并文件时的模块定义。

[https://gist.github.com/846f1245c2ea69e2f5d6](https://gist.github.com/846f1245c2ea69e2f5d6)

[leonlu]

amd推荐的开发模式是一个文件只写一个模块，同时推荐只定义匿名的模块。也就是这样：

比如, app/index.js里边的代码应该是

// 这里定义一个匿名模块
define(function (require) {

// 这里明确写出所有的依赖
var common = require('../common/index');

// 这里是模块输出
return {};

});

那么在使用r.js或者其他构建工具的时候，通过语法分析找到相关的数据（主要是路径和依赖），会编译成一个具名且明确依赖的模块，并且将依赖放到前边，比如app/index.js会被编译成这样：

define('common/index', [], function (require) { /*.. */})

define('app/index', ['../common/index'], function (require) { /* .. */ });

合并的原因是，不合并的amd脚本根本没办法用。一个页面上异步加载好几十个脚本，然后才算启动成功，太low了，根本不能用到生产环境上。。。

当然还有其他方面的考虑，请参考amd的规范。