Javascript、多文件模块和 Require.Js

Question

我正在用 Javascript 设计一个不平凡的应用程序。

从我到目前为止读到的内容来看，常见的做法是通过将所有内容定义到模块中来避免全局命名空间困惑。

为了方便和代码清晰，可以使用 module Augmentation pattern 将模块划分为单独的文件。

var MODULE = (function (my) {

   // functions, objects, etc ...

   return my;
}(MODULE || {}));

现在，当有许多模块和模块依赖项时，require.Js 似乎是一个有前途的工具，可以添加顺序、解耦和更清晰的命名空间。让所有模块异步加载，并确保它们仅在其依赖项准备就绪后运行。

define(["depenencyModule1", "depenencyModule2"], 
    function(depenencyModule1, depenencyModule2) {

       // define MyModule

       return MyModule;
    }
);

然而，这种用法会干扰之前的模块增强模式，起初我似乎使用错误，但后来我经历了 require.js documentation并发现了这个:

“考虑到模块名称到文件路径查找算法的性质，每个 JavaScript 文件只应定义一个模块。”

所以现在我很困惑，如果我将模块写入单个文件，它将变得巨大且可维护，这不是使 require.js 毫无用处吗？ 或者也许 Javascript 的模块概念与其他语言的模块相比只是一小段代码？

Answer 1

RequireJS 允许您拥有一个外观模块，该模块作为一组 RequireJS 模块实现。例如，您可以:

define(function (require, exports, module) {

'use strict';

var foo = require("./foo");
var bar = require("./bar");

for(var prop in foo) {
    exports[prop] = foo[prop];
}

for(var prop in bar) {
    exports[prop] = bar[prop];
}

});

此模块导出 foo 和 bar 中的所有内容。从导入它的人的 Angular 来看，它看起来就像一个模块，尽管涉及三个 RequireJS 模块(外观和它导入的两个模块)。

我所做的另一件事是跨多个模块声明一个类。我可能有一个导出类 Foo 的 foo 模块:

define(function (require, exports, module) {
'use strict';

var core = require("./foo_core");
require("./foo_init");
require("./foo_gui");
...

exports.Foo = core.Foo;
});

foo_core 模块实际上定义了该类:

define(function (require, exports, module) {
'use strict';

function Foo () {
   // ...
}

Foo.prototype.bar = function () { ... };

exports.Foo = Foo
});

其他模块添加到其中。 foo_init:

define(function (require, exports, module) {
'use strict';

var Foo = require("./foo_core").Foo;

Foo.prototype.init = function () { ... };
});

foo_gui:

define(function (require, exports, module) {
'use strict';

var Foo = require("./foo_core").Foo;

Foo.prototype.render = function () { ... };
Foo.prototype.erase = function () { ... };
});

我使用了上述两种方法来拆分代码，从 API 的 Angular 来看，代码应该显示为单个模块，但跨多个文件实现。