javascript/jquery 代码组织答案

【问题标题】：javascript / jquery code organisationjavascript/jquery 代码组织
【发布时间】：2010-07-20 14:21:36
【问题描述】：

我想获得一些关于构建我的 javascript 代码和 jquery 函数的建议。我喜欢将 JQuery 用于 dom 事件处理和 ajax 等。过去我写过看起来很糟糕的代码，我的整个 js 文件由一堆匿名 Jquery 函数组成。

我想知道 - 与 JQuery 结合时，“结构良好”的 javascript 文件是什么样的？是否会有很多标准的 javascript 函数，然后在需要时放入一些 JQuery $() 函数？是否可以以纯粹的程序方式处理代码，还是最好使用一些 OOP 概念？我一直只有一堆函数，这些函数在这里和那里用辅助函数分层调用，没有对象（除了使用一些随机的 3rd 方库时使用的那些）。

我不是 javascript 程序员（主要是 Java），所以任何有经验的 js 开发人员的建议都会很棒。

【问题讨论】：

规则 1：不要试图让你的 Javascript 代码看起来像 Java。那就是疯狂。
这让我发疯了。这就是为什么我想知道它到底应该是什么样子。
你应该尽可能使用 jQuery 的函数。 $ 主要用于 DOM 元素的选择和操作，因为那里几乎没有标准。

标签： javascript jquery code-structure

【解决方案1】：

老实说，我尝试将 MVC 概念应用于 jQuery。一旦超过 500 行，如果不这样做，就会很难跟上进度。

型号

任何本地缓存的数据
Cookie
从服务器读取/写入服务器 (AJAX)

查看

基本上所有 DHTML 内容（HTML 生成/操作、CSS 更改、动画/效果等）

控制器

事件处理（用户事件和自定义事件）

甚至还有some projects out there为此。

【讨论】：

【解决方案2】：

我建议面向对象的结构，不仅因为这个概念是最先进的，但也出于概述原因，您应该封装属于彼此的函数。

如果您有一个大型 js 文件（出于性能原因，您应该只有一个），如果您不按功能构建代码，几周后您将找不到任何东西。

【讨论】：

“出于性能原因，您应该只有一个” ...或者更好地将您的代码拆分为单独的文件，并使用自定义处理程序将其合并并作为一个请求加载。
老实说，我发现 Javascript，尤其是 jQuery，作为 OOP 环境并不能很好地工作。 jQuery 本身真的不是一个 OO 库。

【解决方案3】：

如果您使用 jQuery 上床，那么我的建议是一直上床。这意味着在适当的时候编写自己的 jQuery 插件代码，这将是当你发现自己想要编写一个将 jQuery 对象作为参数的函数时。

因为网页 Javascript 代码的本质是，基本上所有事情都发生在事件循环中，大多数例程都非常小。可能要完成的最大块工作是初始化所有处理程序的代码。当您构建一个包含许多页面的应用程序网站时，您可以选择：

让每个页面都成为它自己的特殊雪花，为自己的行为使用自己的 Javascript

或

将所有页面的行为收集并标准化到一个全局机制中

两种方式我都经历过，第二种方式肯定更好，但也有其自身的问题。您必须掌握最新情况并确保特殊情况不会导致代码渗入您的 HTML（或 JSP）源。必须有人处理站点全局脚本代码试图将自身应用于每个页面的性能问题。而且，当然，你开始发展一个可怕的初始化函数。

在这样的事情上让我免于维护地狱的是一个构建步骤，它将单独的脚本文件（每页一个“功能”，或多或少，加上自定义 jQuery 插件）组合成一个单一的整体脚本，以实际部署到服务器.我用 FreeMarker 做到了这一点，但还有很多其他方法可以做到这一点。有这样一个步骤的一个很好的副产品是现在是运行 YUICompressor 的好时机。

【讨论】：

【解决方案4】：

我必须赞同 Peter Bailey 的回答，因为最好将 M V 和 C 分开。我发现 GUI 小部件的最佳样式是创建一个初始化小部件的函数（创建 HTML、添加样式或附加动画事件），然后为使用它的不同位置附加 custom 事件处理程序.

自定义事件是可重用小部件的键。它使代码对 GUI 小部件中的 DOM 更改不那么脆弱，并使您的代码更具可读性。

例如，假设您有一个自定义按钮，它可以像这样动态创建 HTML 结构：

<div class="MyButton"><div class="button-helpful-wrapper"><img src="/blah.png"/></div></div>

假设您的初始化代码添加了一些淡入淡出或任何使用点击事件的内容。没关系。

有趣的是当你想使用这个按钮时；您将“点击”事件附加到哪个 div？不必知道 GUI 小部件的结构，最好为小部件创建一种新类型的事件。像这样：

$('#MyButton_Instance1').bind('myclick', function () {...} );

并且完全不知道小部件的结构。

要完成这项工作，您只需添加一些绑定/触发器，将实际事件代理到您的自定义事件。放置它的最佳位置是在您的小部件初始化代码中：

$('.MyButton').myButton();

在哪里

myButton = function () {
    $(this).find('.button-helpful-wrapper').bind('click', function (event) {
        $(this).trigger('myclick', event);
    });
}

这使您的小部件非常可重用，因为您没有附加到特定的 DOM 元素事件，而是附加到一个通用的小部件事件。试试看。

【讨论】：

【解决方案5】：

首先，您可以使用对象样式方法，方法优于函数

例子

var User = {
    loggedin : false,
    name : "Robert PItt",
    id : 45
}

你可以像这样在 js 文件中创建一个系统项

if(typeof System == undefined)
{
    System = new Object();
}

System.Globals = 
{
   //Some Global Settings,uri's etc in here
}

System.Gui = {
   Init : function()
   {
      if(User.loggedin == true)
      {
          this.RemoveItem("#userlogin");
      }
   },
   RemoveItem: function(form)
   {
       $(form).remove();
   }
}

System.Gui.init(); //Within head maybe/

如您所见，您可以创建多个“容器”来保存您的方法，容器有助于组织代码并同时将其分开，您可以在 GUI 旁边创建诸如 Ajax、工具、安全、回调等。

【讨论】：