为大型应用程序构建/组织 javascript 的正确方法是什么？答案

【问题标题】：What is the proper way to structure/organize javascript for a large application?为大型应用程序构建/组织 javascript 的正确方法是什么？
【发布时间】：2011-11-30 19:15:46
【问题描述】：

假设您正在构建一个大型应用程序，并且您希望网站上有大量的 JavaScript。即使您将 javascript 分成每个使用 javascript 的页面的 1 个文件，您仍然会有大约 100 个 javascript 文件。

保持文件系统井井有条、在页面上包含这些文件以及保持代码结构本身井井有条的最佳方法是什么？一直以来，可以选择将事物缩小以用于生产也很重要。

【问题讨论】：

标签： javascript ajax architecture organization

【解决方案1】：

我个人更喜欢模块模式来构建代码，我认为这篇文章给出了很好的介绍： http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

它使我的全局范围保持干净，启用命名空间，并提供了一种很好的方式来分隔公共和私有方法和字段。

我会将代码构建在单独的文件中，并设法保持低耦合和高内聚。尽管多个文件不利于客户端性能（您应尽量减少请求数量），但您可以使用压缩实用程序轻松获得两全其美的效果。

我对 YUI Compressor 有一些经验（有一个 Maven 插件： http://alchim.sourceforge.net/yuicompressor-maven-plugin/compress-mojo.html - 我自己没用过）。如果您需要以某种方式对 javascript 文件进行排序（也适用于 CSS），您可以制作一个 shell 脚本，预先按照给定的顺序连接文件（提示：YUI Compressor 默认为 STDIN）。

此外，无论您决定缩小文件的哪种方式都可能会很好。相反，您应该关注如何构建代码，以便它在客户端上表现良好（为了满足良好的用户体验，应该是最高优先级），并且可以以适合您的方式进行维护。

你提到了命名空间，这是个好主意，但我会小心地从传统的面向对象领域中采用太多概念，而是学习利用 javascript 语言的许多优秀特性:)

【讨论】：

这似乎是最简单的方法。将其压缩并合并为1个文件的最佳工具是什么，最好是与maven一起使用的东西？ YUI 压缩器似乎处理了 min 部分，但不幸的是我没有看到加入文件和指定排序的选项。
我对 YUI Compressor 有一些经验，它有一个 maven 插件 (alchim.sourceforge.net/yuicompressor-maven-plugin/…)。它还支持多个输入（使用通配符），但我想如果您需要更改默认顺序，您将手动列出所有文件或创建一个 shell 脚本。正如@Josh 提到的，RequireJS，使用 Clojure 编译器进行缩小和连接也很受欢迎。
对于一个有很多很多 JS 文件的大型应用程序，您是说使用 RequireJS 会更好，还是您的方法（我假设类似于 ThiefMaster 的）
如果您的意思是我更喜欢 YUI 还是 requireJS，老实说，我认为最终使用哪种工具并不重要。您的重点应该是如何构建您的代码，以使其表现良好并以适合您的方式进行维护。 YUI Compressor 和 RequireJS 都可以很好地完成连接/缩小的工作:)

【解决方案2】：

如果整体大小不太大，我会使用脚本将所有文件编译成一个文件并缩小这个文件。然后我会使用激进的缓存加上 url 中的 mtime，这样人们只加载该文件一次，但一旦有新文件可用就立即获取。

【讨论】：

虽然我期待答案的一部分（谢谢你），你如何组织文件结构，更重要的是，你如何组织甚至连接代码（即它的架构，如果任何）？
我有一个文件，按照我希望它们在编译文件中的顺序列出所有 JS 文件。所以我手动确保依赖项可用。
所以一切都是手动完成的，而不是通过构建过程？你的 html 呢？它总是指向编译后的版本，还是你在开发和生产之间进行管理？我不想在每次更改 javascript 文件时都运行编译程序你的编译脚本 - 就像所有 100 个？
我的模板中有一个条件，它执行为所有文件或单个文件创建脚本标签的函数。编译当然是由构建脚本完成的；唯一手动完成的事情是确保满足依赖关系 - 使用 jQuery 插件通常是“在 jQuery/UI 之后加载 X”，并且我的应用程序代码被拆分为不相互依赖的文件。
我非常喜欢使用模块模式。对于需要特定 JS 的每个页面，我都有 function whateverInit(options){}。该函数包含该站点的所有逻辑 - 即它注册处理程序，包含私有函数等。在相关页面上，我通过脚本标签中的 document.ready 执行该函数。

【解决方案3】：

用途：

jslint - 保持对代码质量的检查。
require.js - 仅获取每个页面所需的代码（或等效代码）。

像组织任何其他软件项目一样组织您的 js，按角色、职责和分离关注点进行分解。

【讨论】：

我显然知道如何重构，但是人们在架构上拆分行为的方式有很多。有些人使用命名空间。有些人使用类（他们自己的系统添加到 Javascript 中）。其他人将所有内容包装在匿名函数中。有很多方法可以做到这一点。我不知道哪个是正确的。其他编程语言给你的选择很少，所以你不能把它搞砸。在 JS 领域，人们发明了大约 20 种方法——甚至根本没有。