如何组织Javascript代码？

当我第一次开始使用Javascript时，我通常只把我需要的东西放入函数中，并在需要时调用它们。那是当时

现在，随着我用Javascript构建越来越复杂的web应用程序；利用它更具响应性的用户交互，我意识到我需要让我的代码更具可读性——不仅是我自己，还有任何取代我的人。除此之外，我希望在几个月后阅读自己的代码时减少“见鬼，我为什么这么做”的时刻（是的，我在这里是诚实的，我自己也有见鬼的时刻，尽管我试图避免这种情况）

几周前，我进入了Joose，到目前为止，它还不错，但我想知道其他人如何将代码分为有意义的部分，并让下一个程序员可读

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

---

所以，如果你不理解上面的内容，你会使用OOP实践吗。如果你不知道，你用什么

我使用不引人注目的javascript，因此，在脚本标记之外，我不会在html中保留任何javascript

两者完全分离

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

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

因此，例如，如果我有UI函数，那么我可以称它们为：myapp_UI_functions.js

---

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

我已经将许多可重用代码重写为jQuery插件。当我开始使用ASP.NETMVC时，我从Prototype迁移到了jQuery。随着时间的推移，我已经将我的许多可重用代码，或者至少是思想，从基于原型的OO迁移到jQuery风格的插件。其中大多数都存储在自己的JS文件中（主要是内部网应用程序，因此尽管有额外的请求，页面加载速度还是相当高）。我想如果需要的话，我可以添加一个构建步骤来合并这些

我还确定了一种母版页方法，即在结束正文标记之前为脚本使用ContentPlaceHolder。加载标准jQuery/jQuery UI，任何其他常见的JS都位于母版页中的脚本占位符之前。我在母版页的顶部有一小段JS，它定义了一个数组，该数组包含部分视图需要在页面加载时运行的任何函数。这些函数是从母版页中的base document.ready（）函数运行的

---

我所有的JS都与我的标记完全不同。一些JS可能存在于部分视图中——当部分视图可能被多次包含以使其特定于该视图实例时，这些JS会被封装——但通常不会。通常只包含在占位符中，以便将其加载到页面底部。

此外，如果您想变得过于沉重，请查看mochikit:

我（通常）有一个包含一系列函数的文件，就是它。它包含在每个使用Javascript的页面中。在页面本身中，我将调用以下函数：

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

其中，在外部文件中定义了

delete\u user（）

和

new\u user（）

我也使用不引人注目的Javascript，这对我来说意味着（还有其他不引人注目的库）

您不希望每个页面都有单独的文件。这只意味着更多不必要的外部HTTP请求。假设您已经有效地缓存了一个文件，则只需下载一次即可（直到它发生更改）

如果我有大量的Javascript，或者站点被有效地分割成多个区域，那么我可能会分割Javascript，但这种情况并不常见

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

---

更多信息请访问和。

我发现，如果您希望javascript干净、可读，甚至有点安全，那么使用OO方法开发javascript是一种可行的方法。我发布了以下问题

对于如何编写好我的javascript代码，我得到了一些非常好的回答。如果遵循这些基本原则，您几乎可以轻松地使用任何库，如yui、jquery和prototype。

对于真正使用JS的应用程序，您应该尝试模仿Java

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

---

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

这是正确的，我只想补充一点，使用jQuery或Prototype更容易实现。很好，我喜欢使用类似HTML页面的Javascript文件的想法（我也为大型应用程序这样做）。我确实喜欢这种不引人注目的代码。在HTML标签上看到“onclick”事件让我非常激动。我喜欢jQuery插件的想法，但是如果你的应用程序中发生了很多事件，那么如何分解事件处理部分呢？有你愿意分享的代码吗？伊莉

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