javascript - 跨多个文件的 IIFE

Question

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

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

Answer 1

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

您已经提到您目前正在使用 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+ 语法:

我的组件.js:

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

app.js:

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

// ...use them...

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