如何在多个文件中组织JS函数

Question

我有一个经典的面向对象编程（OOP）背景，最近开始学习JavaScript。然而，有一件事情我还是不太明白：

在经典的OOP语言中，通常为每个类创建单独的文件，因为这样可以更轻松地维护代码。JS没有真正的类，据我所知，也没有一种真正简单明了的方法来从一个文件中包含另一个JS文件。然而，当你与团队一起处理大型JS项目时，你可能希望将该项目拆分成多个文件。如何做到这一点？你需要在这些文件中放什么内容，并且如何使它们正确加载？

- Tiddo

Answer 1

我喜欢你的问题。我使用面向对象的方式编写JavaScript，并将我的对象构造函数放在它们自己的文件中。我将所有的.js文件放入一个目录中，可以按任意方式组织子目录。然后我运行一个“make”脚本。以下是我编写的Bash脚本。我在Linux机器上工作，因此Bash脚本是我和任何在Linux上工作的人的自然解决方案。

#!/bin/bash

echo '' > temp0.js 
find ./bin/external -name \*.js -exec cat {} >> temp0.js \;

echo ''> temp1.js
echo '(function(){' > temp1.js
find ./bin/prop -name \*.js -exec cat {} >> temp1.js \;
echo '})();' >> temp1.js

cat temp0.js temp1.js > script.js
rm temp1.js temp0.js

如果我这个bash脚本的写法很业余，请您见谅。对于bash脚本，我只会将能用的拼凑在一起，但是在JavaScript方面，我喜欢保持代码的整洁有条理，并且面向对象。

该bash脚本放置在一个目录中，与一个名为“bin”的目录并列，其中包含了所有的javascript .js文件。“external”子目录中包含了各种借用的脚本，例如JQuery。在上面的示例中，我将自己的.js脚本放在名为“prop”的文件夹中。bash脚本获取了这些脚本并将它们连接在一起。它还在我的prop文件中添加了一个匿名函数，以便给它们提供一个私有命名空间（类似于）。

我知道这不完全符合您想要的Java，但我认为这种选项是我们在JavaScript中所必须采取的。

- user1052335

---

我真的很喜欢这个解决方案！这也是我得到的最完整的答案，所以谢谢！ - Tiddo

Answer 2

JavaScript的原型模型非常面向对象，您可以自由地将代码分解为任意数量的文件。有几种不同的方法来加载依赖项，其中RequireJS是一种流行的方法。

- row1

Answer 3

您需要根据项目的实际情况对代码进行分段。至于如何包含脚本，这更加困难。最简单的方法是只需包含多个JavaScript文件，可以按顺序从HTML中调用（<script src="..."></script><script src="..."></script>），或使用依赖管理器或加载脚本，例如Yepnope或RequireJS等。
但是，如果您想从HTML中仅包含一个脚本，可以将文件连接起来（使用类似Ant或其他构建脚本），或者像此处描述的那样使用JavaScript来包含其他脚本：如何在另一个JavaScript文件中包含JavaScript文件？。

- Matt Stauffer

Answer 4

你可以按任何逻辑方法对文件进行分组。通常是按功能来完成的 - 这个文件用于动画标志，这个文件使主页幻灯片函数正常工作，这个文件处理导航栏下拉菜单。我想你通常会将团队分成类似的组织，每个人负责一个特定的功能。除此之外，源代码控制管理就像任何其他项目一样，用户必须在工作时签出或提交代码。

- Tim