JavaScript文件组织风格指南

Question

我曾参与过一个重度依赖JavaScript的web项目，并发现缺乏JS使用规范。最让我不安的是，所有人都在这里添加文件，那里添加文件，导致组织和交付方式一团糟。因为每个新项目都会遇到这个问题，所以我希望有像JavaScript样式指南之类的东西。该样式指南应回答以下问题：

• 在开发期间要如何在文件系统中组织JavaScript文件？
• JavaScript部分应该如何与HTML和应用程序的其他部分分离？
• 在实际应用程序中应该如何传递JavaScript文件，以便在每个请求上加载更少的代码并发送不太多的请求？

是否有公开可用的东西作为我们自己样式指南开发的起点？您在使用样式指南方面的经验是什么？开发人员是否容易遵循它，其中哪些部分简单，哪些部分困难？

（我知道这不只是一个问题，但我对整个故事感兴趣。背景是我们使用了JQuery和JSF，但我认为这不会影响答案。）

- mliebelt

Answer 1

如果你在进行大量的客户端开发，那么你可能会采用MVC方式。所以我将使用brunch的方法来回答你的问题。Brunch项目使用MVC库Backbone.js，并有严格的目录结构。

“JavaScript文件在开发期间应如何组织？” 使用Stitch将您的文件组织为CommonJS模块。然后，您将能够使用 require()定义它们之间的依赖关系，并将它们合并到一个文件中。

“JavaScript部分应该与HTML和应用程序的其他部分分离吗？” build目录用于存储html；build/web用于存储javascript、图像和css。

在实际应用中，JavaScript文件应该如何传送以使每个请求加载的代码更少，而不必发送太多请求？ 在构建阶段，所有JavaScript都被压缩并组合成一个文件（build/web/js/app.js），这样客户端在首次访问您的站点时只需要进行一次HTTP请求。 让构建过程尽可能简单可能是一个好主意。Brunch通过提供brunch watch命令来监视文件系统的更改并借助Stitch和其他一些工具即时构建代码来做到这一点。 （值得注意的是，在开发期间，brunch项目还使用CoffeeScript作为主要语言；它由brunch透明地编译成最终的JavaScript。但是，只要涉及文件组织，这就无关紧要，并超出了您的问题范围。）

- Anton Strogonoff

---

非常感谢您提供如此详细的答案，特别是针对我的问题提供的参考资料。我一定会查看Brunch和Stich这些工具，并学习如何将它们集成到基于Java的开发流程中。 - mliebelt

我目前已经将早午餐集成到基于Django的开发中。结果证明这相当容易。客户端代码基本上是一个自包含的子项目，它在使用后端提供的JSON API时完成了所有繁重的工作。 - Anton Strogonoff

Answer 2

对于所有的JavaScript文件，一定要使用单独的目录。尽可能地按语义分割文件。一个大的构造函数应该对应一个单独的文件。在可以创建目录的情况下，不要使用文件名前缀。

Unix风格的目录结构通常可以在GitHub上找到：

- `src` -- 用于存放源JavaScript文件。 - `lib` -- 用于存放库文件。 - `tests` -- 用于存放单元测试文件。 - `bin` -- 用于存放可执行文件。 - `dist` -- 用于存放编译后的文件。

为了编译，我们使用一个带有生产和开发目标的`Makefile`。生产版本是将所有文件 JSHint 进行了压缩和合并。开发目标是生成一个包含所有JavaScript文件的服务器端脚本（以便轻松地包含到HTML中）。

但是一般情况下这取决于具体情况。我们在一个项目中使用了一个widget目录。这个widget目录有一组单独的小部件子目录（例如slider，tabs，modal-window），每个子目录都有以下布局（受DOMLoader启发）：

• html -- 用于HTML模板。
• css -- 小部件所需的CSS文件。
• js -- 小部件JavaScript构造函数。

- katspaugh

---

感谢您提供详细的答案和经验，如果可能的话，我也会将您的答案标记为正确答案。现在，#Anton_Strogonoff的答案得到了认可。 - mliebelt

Answer 3

Crockford提供了一些风格指南，而Yahoo卓越性能网站则提供了详细信息，这对您可能会有所帮助。

- Noufal Ibrahim

---

谷歌：http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml - katspaugh

我已经看过Crockford的样式指南，这是一个起点。然而，它并没有提到如何在更大的范围内组织JavaScript代码。我希望能够找到一些关于如何做到这一点的样式指南的参考资料。 - mliebelt

我自己并没有找到。我知道的最好的是Yslow推荐的建议。 - Noufal Ibrahim

Answer 4

我可以推荐一本书：Stoyan Stefanov 的《JavaScript Patterns》。我认为这是关于 JavaScript 最好的书之一。

- kukipei