Javascript 跨多个文件的iLife

在同一个iLife中是否需要在2个或更多单独的文件中定义javascript代码？我愿意使用像gulp这样的构建工具来实现这一点

---

这似乎是一个很平常的问题。我希望我的代码被组织起来，并被分割成自己的文件（顺便说一句，不同的淘汰视图模型）。但我希望它们都能在相同的功能下运行，而不是污染全球。

实现这一点的现代方法是使用模块，而不是试图将所有东西都投入到生活中。现在，使用模块意味着使用模块绑定器，如RequireJS、SystemJS、Webpack、Browserify等。在中期未来，如果您愿意，您可以直接在浏览器中使用ES2015+模块，或者再次使用绑定器将其绑定到单个文件中。（现在，您可以将ES2015+模块语法用于Babel等Transpiler，但您仍然需要一个bundler。）

您提到目前正在使用RequireJS，但没有使用它的

define

功能。为了便于说明，这里大致介绍了您如何定义模块（我不喜欢Require的语法，但您可以使用Babel将ES2015语法传输到它）：

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

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

    // Return it
    return MyComponent;
});

即：

表示模块名为

my component

（模块名称是可选的，因此例如应用程序的顶级模块不需要名称）

表示它取决于模块

ko

（提供敲除）；请注意，该依赖项是如何作为参数提供给用于定义模块的回调函数的

返回

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;

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

// ...use them...

app.js

：

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

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

// ...use them...

---

显然，这两个例子都非常简化，而且你还可以做很多事情。

这是两个不同的问题

一个生命可以跨越多个文件吗？不

多个文件中的类/函数/等是否可以不影响全局范围-是 文件1

文件2

文件3

---

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

当然。选择您想要使用的工具超出了堆栈溢出的范围（它将是基于意见的），但是是的，您可以使用concat文件来实现这一点。就为了这个目的而击倒自己。是的！我见过这些碎片，知道这是可能的。把所有的文件浓缩在一起，并用一个生命围绕着它，这似乎是非常琐碎的事情（也许是用一口浓缩咖啡）。但是问题在铬合金中发展。我希望仍然能够使用chrome的开发工具对代码进行动态更改。在一个生成的js文件上制作它们是行不通的，我需要能够修改原始文件。谢谢！我正在使用RequireJS导入我的所有文件。我没有使用任何define（）功能，只是使用它通过require（）将javascript文件导入浏览器。我试图查阅文档，把所有这些文件都放到一个生活中，但结果很短。@smulz:对不起，我应该更清楚一点：你不能把所有的东西都放在一个生活中。相反，您在模块中定义事物（在模块中不创建全局对象），并使用

require

和

define

（对于RequireJS）将所需的事物从一个模块拉到另一个模块中。这些绑定器有一个工具，您可以让它在构建时使用，该工具遍历依赖关系树并构建包含所有依赖关系的单个文件（不会创建不必要的全局文件）。例如，使用IIFEs的现代方法是使用模块来代替。@smulz:所以在开发时，捆绑程序会单独引入文件，这对于开发非常方便。准备发布时，您将运行一个构建，该构建将运行bundler的依赖关系树检查，并将文件合并到一个可交付文件中。谢谢TJ。我想我明白了。我想我希望找到一个不需要大量重构的解决方案。但这似乎是正确的解决方案。感谢您提供的详细示例。非常有帮助。是的，这是我最初处理这个问题的方法。我不是一个超级粉丝，因为有大量代码需要重构，以便将“myn”添加到每个对象实例化中。我开始觉得我没有其他选择了。@smulz:youdo:Modules.@smulz说得很清楚，这是一个老式的答案。从现代意义上讲，T.J.远远更为正确。

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