你如何组织你的Javascript代码？

当我第一次使用Javascript时,我通常只需将我需要的东西放入函数中,并在需要时调用它们.就在那时.

现在,我正在用Javascript构建越来越复杂的Web应用程序; 利用其响应更快的用户交互,我意识到我需要让我的代码更具可读性 - 不仅是我,还有任何取代我的人.除此之外,我希望在几个月后阅读我自己的代码时,减少"我为什么这么做"的时刻(是的,我在这里说实话,我确实有什么想法,我在思考片刻的时候自己,虽然我尽量避免这种情况)

几个星期前,我进入了Joose,到目前为止,它已经很好了,但我想知道其他人如何将他们的代码变成有意义的部分并且可供下一个程序员阅读.

除了使其可读之外,您将HTML与代码逻辑分离的步骤是什么？假设您需要使用数据创建动态表行.你是否在你的Javascript代码中包含它,将td元素附加到字符串或者你做了什么.我正在寻找现实世界的解决方案和想法,而不是某些专家提出的一些理论观点.

那么,如果您不理解上述内容,您是否使用OOP实践.如果你不这样做你用什么？

对于真正的 JS重型应用程序,您应该尝试模仿Java.

在HTML中尽可能少的JS(最好是 - 只需调用bootstrap函数)

将代码分解为逻辑单元,将它们全部保存在单独的文件中

使用脚本将文件连接/缩小为一个捆绑包,您将作为应用程序的一部分

使用JS命名空间可以避免混乱全局命名空间:

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

即使您没有使用任何框架,使用所有这些技术将产生一个非常易于管理的项目.

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

两者完全分开.

一个javascript函数将在DOM树完成时启动,它将通过html并添加javascript事件,以及需要更改的任何其他内容.

为了组织起见,我倾向于使用一些javascript文件命名,类似于他们使用的html页面,然后对于常见功能,我倾向于按照他们的工作对它们进行分组,并选择一个解释它的名称.

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

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

我(通常)有一个文件包含一堆函数,就是这样.这包含在每个使用Javascript的页面中.在页面本身中,我将调用以下函数:

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

where delete_user()和new_user()在外部文件中定义.

我也使用不引人注目的Javascript,对我来说这意味着jQuery(还有其他不引人注意的库).

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

如果我有大量的Javascript或该网站被有效地分成多个区域,那么我可能会拆分Javascript,但事实并非如此.

另外,就我的源代码而言,我可能有多个JS文件但我经常最终将它们组合成一个客户端下载(以减少HTTP请求).

有关多个javascript/css文件的更多信息:最佳做法？和PHP中的Javascript.