关于组织文件的JavaScript样式指南

我曾在一个web项目中工作，其中大部分是JavaScript，我注意到没有使用JavaScript的风格。最让我不安的是，每个人都在各处添加了文件，这导致了组织和交付文件的混乱。因为这将发生在每个新项目中，所以我希望有一个类似JavaScript的样式指南。本样式指南应解决以下问题：

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

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

---

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

Crockford有一些，Yahoo Exception performance网站也有一些，可能对您有用。

我可以推荐一本书：Stoyan Stefanov的JavaScript模式。

---

我认为最好的关于javascript的书之一，对于所有javascript文件来说，肯定使用了一个单独的目录。在语义上拥有尽可能多的文件。一个大型构造函数应该对应一个单独的文件。不要在可以创建目录的地方使用文件名前缀

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

• src

  ——用于源JavaScript

• lib

  ——用于库

• 测试

  ——用于单元测试

• bin

  ——用于可执行文件

• dist

  ——用于编译文件

对于编译，我们使用一个带有生产和开发目标的

Makefile

。生产版本将所有文件压缩、缩小并合并为一个。开发目标是生成一个服务器端脚本，动态地包含所有JavaScript文件（以便于包含到HTML中）

但一般来说，这要视情况而定。我们为一个项目使用了

小部件

目录。此

小部件

目录有一组单独的小部件子目录（例如

滑块

，

选项卡

，

模式窗口

），每个小部件子目录都有以下布局（灵感来源于）：

• html

  ——用于html模板

• css

  ——用于小部件所需的css文件

• js

  ——用于小部件JavaScript构造函数

---

如果你在做大量的客户端工作，你可能会走MVC的道路

因此，我将用政府采取的方法回答你们的问题。早午餐项目使用MVC library Backbone.js，并且具有严格的目录结构

在开发过程中，文件系统中应如何组织JavaScript文件

src/ 应用程序/ 收藏/ 控制器/ 模型/ 风格/ 模板/ 观点/ 卖主/ 建造/ 网/ config.yaml 用于将文件组织为CommonJS模块。然后，您将能够使用

require（）

定义它们之间的依赖关系，以及稍后将它们合并到一个文件中

JavaScript部分应如何与HTML和应用程序的其他部分分离

build

目录用于存储html

build/web

用于存储javascript、图像和css

如何在实际应用程序中交付JavaScript文件，以便在每个请求上加载更少的代码，而不必发送太多的请求

在构建阶段，所有JavaScript都被缩小并合并到一个文件中（

build/web/js/app.js

），这样客户端在第一次访问您的站点时只需发出一个HTTP请求

尽可能简化构建过程可能是个好主意。Brunch通过提供

brunchwatch

命令来做到这一点，该命令监视文件系统的变化，并在Stitch和其他一些工具的帮助下立即构建代码

---

（需要注意的是，在开发过程中，brunch项目也使用CoffeeScript作为主要语言；在缝合生成的JavaScript之前，它是由brunch透明地编译的。但是，这与文件组织无关，不在您的问题范围之内。）

和谷歌：我已经看过Crockford的styleguide，这是一个起点。然而，它并没有说明如何在更大范围内组织JavaScript代码。我想看看对样式指南的引用，它们也有如何做到这一点的想法。我自己还没有找到任何。我所知道的最好的是Yslow提出的建议。谢谢你的详细回答，特别是我的问题。我将明确地看一看工具brunch和stich，以及如何将它们集成到基于Java的开发过程中。结果证明这很容易。客户端代码基本上是一个自包含的子项目，它使用后端提供的JSON API完成所有繁重的工作。感谢您提供的详细答案和经验，如果可能的话，我也会将您的答案标记为正确答案。安东·斯特罗戈诺夫的回答现在得到了认可。 src/ app/ collections/ controllers/ models/ styles/ templates/ views/ vendor/ build/ web/ config.yaml