你如何组织你的Javascript代码？

当我第一次使用Javascript时，通常只需将我需要的任何东西放入函数中，并在需要时调用它们。那是当时的情况。你如何组织你的Javascript代码？

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

几个星期前，我进入了Joose，到目前为止，它一直很好，但我想知道其他人做了什么使他们的块代码变得有意义段，并由下一位程序员读取。

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

因此，如果您不了解上述情况，您是否使用面向对象的操作。如果你不使用什么？

来源

2009-08-28 Dhana

对于真的 JS重载的应用程序，你应该尝试模仿Java。

有尽可能少的JS在你的HTML越好（最好 - 刚刚调用了自举功能）
打破代码为逻辑单元，让他们都在不同的文件中
使用脚本来连接/文件再压缩成一个单一的包，你将作为您的应用程序的一部分
使用JS的命名空间，以避免弄乱全局命名空间：

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

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

来源

2009-08-28 03:13:18 levik

我忘了命名空间。这是一个很好的回应。您也可以尝试使用私有和受保护的变量，而不是所有事情都必须公开。 – 2009-08-28 18:27:48

@JamesBlack在JS中并不总是实用。通过原型定义的方法无法访问专用变量，因为它们必须在构造函数中定义为局部变量，然后通过在此处定义的方法通过闭包来访问。 – Asaf 2012-05-19 15:42:02

我最近一直在做大量的阅读和研究，试图找出如何处理我的JavaScript组织。这是我最喜欢的做法。 – theblang 2012-12-19 17:36:41

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

两者完全分开。

当DOM树完成时，JavaScript函数将启动，该函数将通过html并添加javascript事件以及其他需要更改的内容。

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

因此，举例来说，如果我有UI功能的话，我可以给他们打电话：myapp_ui_functions.js

我尝试在文件名把应用程序的名称，除非有一些JavaScript是常见的几个项目，比如strings.js。

来源

2009-08-28 01:41:28

这是正确的，我只想补充一点，用jQuery或Prototype更容易实现。 – David 2009-08-28 01:43:23

不错，我喜欢让Javascript文件类似于HTML页面的想法（我也是这样做的大型应用程序）。我喜欢不显眼的代码。它让我热血沸腾地看到HTML标签上的“onclick”事件。 – Dhana 2009-08-28 01:45:03

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

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

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

来源

2009-08-28 01:44:02 tvanfosson

我喜欢jQuery插件的想法，但是说你的应用程序中有很多事件发生，你如何分解事件处理部分？你愿意分享的任何代码？我喜欢看另一个人的代码，看看我能做些什么来改善自己。 – Dhana 2009-08-28 01:49:50

你可以在我的博客上找到我的几个插件：http://farm-fresh-code.blogspot.com。 – tvanfosson 2009-08-28 01:57:30

另外，如果你想要去OO重，检查出mochikit：http://www.mochikit.com/

来源

2009-08-28 01:47:17 David

David，现在，我结婚了jQuery，因为我将它介绍给我当前的Web开发团队和我未来5天。但是，我一定会检查出来。 – Dhana 2009-08-28 01:54:25

是的，不，这是一个很好的婚姻:) jQuery是惊人的。 – David 2009-08-28 02:43:59

我有（通常）一个文件，其中包含了一堆的功能，就是这样。这包括在每个使用Javascript的页面中。在自己的网页，我会像调用功能：

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

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

我也使用不显眼的Javascript，这对我来说意味着jQuery（还有其他的图书馆是不显眼的）。

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

如果我有大量的Javascript或该网站被有效地分割成多个区域，那么我可能会分裂的Javascript，但情况并非常见。

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

来源

2009-08-28 01:48:03 cletus

我做了一个depandency系统，允许我调用load（'level'）并且Javascript会请求'javascript.php？jquery; jqueryui; level'。 PHP将请求的所有文件附加到一个响应中（并且将最优化地缩小和缓存它）。这意味着我可以拆分我的Javascript，并且几乎总是比加载一个大文件更有效率（因为我不加载我不需要的东西）。 – strager 2009-08-28 01:59:48

不过，我确实喜欢你创建单独函数的想法......做某些事情...嘿，现在听起来很明显，但是当我写代码的时候它并没有！ xD – strager 2009-08-28 02:00:38

@strager，重申您的第二条评论。是的，是lambda的一个缺陷。 – 2009-08-28 03:18:05

我发现使用面向对象方法开发你的JavaScript是要走的路，如果你希望它是干净的，可读的，甚至有点安全。我张贴以下问题

Cleanest format for writing javascript objects

，并获得关于如何写我的javascript代码以及一些精彩的回应。如果您遵循这些基本原则，您可以轻松地使用几乎任何库，例如yui，jquery和prototype。

来源

2009-08-28 01:56:18 Zoidberg

你如何组织你的Javascript代码？

回答

相关问题