跨多个文件的 IIFE

Question

是否可以在同一个 IIFE 中将 javascript 代码定义在 2 个或多个单独的文件中运行？我愿意使用像 gulp 这样的构建工具来完成这个。

这似乎是一个很普通的问题。我希望我的代码被组织起来并分成它们自己的文件（顺便说一句，不同的淘汰赛视图模型）。但我希望它们都在同一个函数中运行而不是污染全局。

Answer 1

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

您提到您目前正在使用 RequireJS 但未使用其 define 功能。仅出于说明的目的，这里是 粗略地 定义模块的方式（我不喜欢 Require 的语法，但你可以使用 Babel 将 ES2015 语法转换为它）：

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

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

    // Return it
    return MyComponent;
});

那个：

表示模块名为 my-component（模块名称是可选的，因此例如应用程序的 top-level 模块不需要名称）
说它依赖于模块ko（提供Knockout）；请注意该依赖项是如何作为参数提供给您用于定义模块的回调的
Returns MyComponent 作为模块定义的 top-level 东西

然后在我的应用程序中：

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...

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

Answer 2

这是两个不同的问题。

一个 IIFE 可以跨越多个文件 - 不能！
可以 classes/functions/etc 在多个文件中不污染全局范围 - 是的！

文件 1

var myNS = {};

文件2

myNS.MyViewModel = function(){ ... }

文件 3

myNS.OtherViewModel = function() { ... }

作为一个非常简单的例子，其中有101种方法可以实现。

跨多个文件的 IIFE

IIFE across multiple files

javascript

iife

knockout.js