组织大型 javascript 应用程序的工具和最佳实践

Posted 2023-03-08

【中文标题】组织大型 javascript 应用程序的工具和最佳实践

【英文标题】：Tools and best practices for organizing large javascript applications

【发布时间】：2012-08-02 11:37:39

【问题描述】：

我正在开发相当复杂的 web 应用程序/仪表板，主要使用 javascript。我喜欢在服务器上使用 mongo 和 node，但在客户端上通常会有特定于应用程序的库和脚本混乱。

我目前的项目包括bootstrap、jquery、jquery-ui、D3、leaflet、crossfilter 和一些不起眼的东西的组合，可以公平地说，虽然应用程序是太棒了，代码已经变得一团糟。特别是 D3 和 crossfilter 的代码非常冗长，参见例如典型例子来源于官方crossfilter demo。

那么问题是：组织大型 javascript 应用程序的好工具和最佳实践是什么？

我已经避免使用全局变量并尝试使用闭包来组织命名空间，但恐怕我需要一些比这更多的结构。在服务器上有 npm 非常好，但是在浏览器中是否有类似的东西？

我研究了require.js、backbone.js 和coffeescript，但我不太确定这些是否真的能解决问题或只会增加复杂性。

【问题讨论】：

虽然是一个有趣的问题，但您是否查看过FAQ？这或多或少表明这种类型的问题至少是Off Topic或更可能是Not Constructive。

@JaredFarrish 可能会链接到应该发布的位置？

@tybro0103 - 在其他论坛上？不在这里，SE程序员可能没有，SO上还有什么？ SO 并非包罗万象。

【参考方案1】：

听起来您已经走在正确的道路上，但这里有一些提示：

使用框架。 Backbone 现在很流行，但也有其他的。它将极大地帮助代码组织。事实上，如果您的应用程序大小不一，框架绝对是避免意大利面条式代码的必要条件。其他流行的框架包括Ember 和Knockout。

如果您决定不使用这些框架之一，请至少使用模板。比如Mustache或者下划线内置的。

合并和缩小文件。主要是为了优化加载时间。理想情况下，您会找到一些可以添加到后端的东西来为您完成这项工作。例如，Rails 的“资产管道”使用名为 Sprockets 的东西。

我确实听到人们对coffeescript 赞不绝口。它并没有真正添加功能，但喜欢它的人说它使他们的代码更干净。

【讨论】：

每一点，我都看到了争论的方法。因此，我的评论投票。请参阅 Not Constructive 的定义以了解其来源。

我同意...我只是想知道是否存在这样的问题确实属于的地方。人们也需要这些问题的答案。

【参考方案2】：

我认为“模块化”方法是您所需要的，使用模块可能会帮助您摆脱混乱。

你可以看看以下内容：

http://addyosmani.com/largescalejavascript/

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

http://www.2ality.com/2011/04/modules-and-namespaces-in-javascript.html