Question

有没有在两个或更多单独的文件中定义javascript代码才能在同一个IIFE中运行？我愿意使用像gulp这样的构建工具来实现这一目标。

这看起来像是一个平凡的问题。我希望将我的代码组织起来并分成他们自己的文件（顺便说一下，不同的淘汰视图模型）。但是我希望它们都能在同一个函数中运行而不会污染全局。

Answer 1

这样做的现代方法是使用 modules 而不是尝试将所有内容放入IIFE中。目前，使用模块意味着使用诸如RequireJS，SystemJS，Webpack，Browserify等模块捆绑器。在中期未来，如果您愿意，您可以直接在浏览器中使用ES2015 +模块，或者再次使用捆绑器将它们捆绑到一个文件中。（今天你可以使用ES2015 +模块语法和像Babel这样的转发器，但是你仍然需要一个捆绑器。）

您之前提到过您正在使用RequireJS但未使用其define功能。仅仅为了说明的目的，这里是粗略你如何定义一个模块（我不是要求语法的粉丝，但你可以使用Babel将ES2015语法转换成它）：

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

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

    // Return it
    return MyComponent;
});

这：

称模块名为my-component（模块名称是可选的，因此例如应用程序的顶级模块不需要名称）
说它取决于模块ko（提供Knockout）;请注意该依赖关系如何作为用于定义模块的回调的参数提供
返回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...

显然，这两个例子都是非常简化，你可以做的更多。

Answer 2

这是两个不同的问题。

IIFE可以跨多个文件 - NO！
多个文件中的类/函数/等可以不规范全局范围 - 是！

文件1

var myNS = {};

file2的

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

file3的

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

作为一个非常简单的例子，其中有101种方法可以达到同样的目的。

跨多个文件的IIFE

2 个答案: