javascript - 跨多个文件的 IIFE

Question

是否有办法在 2 个或更多单独的文件中定义 javascript 代码以在同一个 IIFE 中运行？我愿意使用 gulp 等构建工具来完成此任务。

这似乎是一个很平常的问题。我希望我的代码被组织并分成自己的文件(顺便说一下，不同的 knockout View 模型)。但我希望它们都在同一个函数中运行而不污染全局。

Answer 1

执行此操作的现代方法是使用模块，而不是尝试将所有内容放入 IIFE 中。现在，使用模块意味着使用模块 bundler ，如 RequireJS、SystemJS、Webpack、Browserify 等。在中期内，如果您愿意，您将能够直接在浏览器中使用 ES2015+ 模块，或者再次使用 bundler 将它们捆绑到一个文件中。 (您现在可以将 ES2015+ 模块语法与 Babel 等转译器一起使用，但您仍然需要一个 bundler 。)

您提到您目前正在使用 RequireJS，但没有使用其 define 功能。仅出于说明目的，以下是定义模块的大致方式(我不喜欢 Require 语法，但您可以使用 Babel 将 ES2015 语法转换为它):

假设我有一个定义 KO 组件的模块:

define("my-component", ["ko"], function(ko) {
    // ...define the component...

    // Return it
    return MyComponent;
});

那个:

1. 表示该模块名为 my-component(模块名称是可选的，因此例如应用程序的顶级模块不需要有名称)
2. 表示它取决于模块ko(提供Knockout)；请注意如何将该依赖项作为参数提供给您用来定义模块的回调
3. 返回 MyComponent 作为模块定义的顶级事物

然后在我的应用程序中:

define(["my-component", "another-component"], function(MyComponent, AnotherComponent) {
    // use MyComponent and AnotherComponent here
});

您还可以使用将常用的其他模块组合在一起的模块，以简化操作。

在 ES2015+ 语法中改为:

my-component.js:

import ko from "./ko";
// ...define MyComponent...
export default MyComponent;

app.js:

import MyComponent from "./my-component";
import AnotherComponent from "./another-component";

// ...use them...

显然，这两个示例都非常简化了，您还可以做更多事情。