关于组织文件的 JavaScript 风格指南

Question

我曾在一个 web 项目中工作，其中 JavaScript 占很大一部分，我注意到没有如何使用 JavaScript 的风格。最让我不安的是，每个人都在这里和那里添加文件，导致组织和交付文件一团糟。因为这会在每个新项目中发生，所以我希望有类似 JavaScript 的样式指南之类的东西。本风格指南应解决以下问题:

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

有没有公开的东西可以作为开发我们自己的风格指南的起点？您使用风格指南的经验是什么？开发者是否容易跟进，其中哪些是简单的，哪些是困难的？

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

Answer 1

如果您正在做重型客户端，您可能会采用 MVC 方式。

因此，我将使用 brunch 采取的方法来回答您的问题。 . Brunch项目使用MVC库Backbone.js，具有严格的目录结构。

How should JavaScript files be organized in the file system during development?

src/  app/    collections/    controllers/    models/    styles/    templates/    views/  vendor/build/  web/config.yaml

使用Stitch将文件组织为 CommonJS 模块。然后您将能够使用 require() 来定义它们之间的依赖关系，以及稍后将它们组合到一个文件中。

How should the JavaScript parts be separated from the HTML and other parts of the application?

build目录用于存放html； build/web用于存放javascript、图片、css。

How should JavaScript files be delivered in the real application, so that less code has to be loaded on each request and not too much requests have to be sent?

在构建阶段，所有的 JavaScript 都被缩小并合并到一个文件中(build/web/js/app.js)，这样客户端在他/她是第一次访问您的网站。

使构建过程尽可能简单可能是个好主意。 Brunch 通过提供 brunch watch 命令来做到这一点，该命令监视文件系统的更改并在 Stitch 和其他一些工具的帮助下立即构建代码。

(需要注意的是，在开发过程中，brunch 项目也使用 CoffeeScript 作为主要语言；它在拼接生成的 JavaScript 之前由 brunch 透明地编译。但是，只要涉及文件组织，这并不重要，并且是超出你的问题范围。)