如何组织Javascript代码？

Question

当我第一次开始使用Javascript时，我通常只是将所需的内容放入函数中，并在需要时调用它们。那是当时的事。

现在，我正在用Javascript构建越来越复杂的web应用程序；利用它的响应性更强的用户交互，我意识到我需要让我的代码更加可读性--不仅仅是我自己，还有任何取代我的人。此外，当我在几个月后阅读我自己的代码时，我希望减少‘到底是什么，我为什么要这么做’的时刻(是的，我在这里是诚实的，我也有我自己在想的事情，尽管我试图避免这种情况)。

几周前，我开始学习Joose，到目前为止，它还不错，但我想知道其他人是如何使代码块成为有意义的片段，并为下一个程序员所读。

除了提高HTML的可读性外，您还有哪些步骤可以使HTML与代码逻辑分离？假设您需要使用数据创建动态表行。您是在Javascript代码中，将td元素追加到字符串中，还是执行其他操作？我正在寻找现实世界的解决方案和想法，，而不是一些专家提出的理论观点。

因此，如果您不了解上面的内容，您是否使用OOP实践。如果你不这么做你会用什么？

Answer 1

对于真正意义上的JS密集型应用程序，您应该尝试模仿Java。

• 在HTML中尽可能少使用JS (最好只是对引导函数的调用)
• 将代码分解为逻辑单元，将它们保存在单独的文件中。
• 使用脚本将文件连接/缩小为一个包，作为应用程序的一部分
• 使用JS名称空间避免混淆全局命名空间：

var myapp = {}; 
myapp.FirstClass = function() { ... }; 
myapp.FirstClass.prototype.method = function() { ... }; 
myapp.SecondClass = function() { ... }; 

将所有这些技术结合在一起将产生一个非常易于管理的项目，即使您没有使用任何框架。

Answer 2

我使用不显眼的javascript，因此，在脚本标记之外，我不会在html中保留任何javascript。

两者是完全分开的。

一个javascript函数将在DOM树完成后启动，它将遍历html并添加javascript事件，以及任何需要更改的内容。

为了进行组织，我倾向于有一些命名类似于它们使用的html页面的javascript文件，然后对于常见的函数，我倾向于按它们所做的对它们进行分组，并选择一个解释这一点的名称。

因此，例如，如果我有UI函数，那么我可以调用它们: myapp_ui_functions.js

我尝试将应用程序的名称放在文件名中，除非有一些javascript是几个项目(如strings.js )所共有的。

Answer 3

我(通常)有一个文件，其中包含一堆函数，仅此而已。它包含在使用Javascript的每一页中。在页面本身中，我将调用以下函数：

$(function() {
  $("#delete").click(delete_user);
  $("#new").click(new_user);
});

其中delete_user()和new_user()在外部文件中定义。

我也使用了低调的Javascript，对我来说，这意味着jQuery (还有其他库是不引人注目的)。

您不希望每个页面都有一个单独的文件。这只是意味着更多不必要的外部HTTP请求。使用一个文件-假设您已经有效地缓存了它-它将被下载一次，这就是它(直到它改变)。

如果我有大量的Javascript，或者站点实际上被分割成多个区域，那么我可以拆分Javascript，但情况并不常见。

此外，就我的源代码而言，我可能有多个JS文件，但我最终常常会将它们合并到客户机的一个下载中(以减少HTTP请求)。

更多信息来自多个javascript/css文件:最佳实践？和PHP中的增压Javascript。