Question

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

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

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

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

那么，如果你不理解上述内容，你会使用OOP实践吗？如果你不这样做你用什么？

Answer 1

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

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

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

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

Answer 2

我使用不引人注目的javascript，所以，在脚本标签之外我不会在html中保留任何javascript。

两者完全分开。

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

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

所以，例如，如果我有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请求）。

Multiple javascript/css files: best practices?和Supercharging Javascript in PHP的更多内容。

Answer 4

我一直在用jQuery插件重写我的许多可重用代码。当我开始做ASP.NET MVC时，我从Prototype转移到了jQuery。加班我将可重复使用的代码，或者至少是从基于Prototype的OO到jQuery样式的插件迁移了很多。其中大部分都存储在自己的JS文件中（主要是内部网应用程序，因此尽管有额外请求，页面加载速度仍然很高）。我想我可以添加一个构建步骤，如果需要的话，可以合并它们。

我还决定使用MasterPage方法，该方法使用ContentPlaceHolder作为关闭正文标记之前的脚本。标准的jQuery / jQuery UI加载，任何其他常见的JS就在MasterPage中的脚本占位符之前。我在MasterPage顶部有一点JS，它定义了一个数组，该数组包含部分视图需要在页面加载时运行的任何函数。这些函数从MasterPage中的基本document.ready（）函数运行。

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

Answer 5

另外，如果你想要重OO，请查看mochikit：http://www.mochikit.com/

Answer 6

我发现如果你希望它是干净的，可读的甚至是安全的，那么使用OO方法开发你的javascript就是你的选择。我发布了以下问题

Cleanest format for writing javascript objects

对如何编写我的javascript代码得到了很好的回应。如果您遵循这些基本原则，您几乎可以使用任何库，例如yui，jquery和prototype。

你如何组织你的Javascript代码？

6 个答案: