6

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

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

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

4

5 回答 5

3

老实说，我尝试将 MVC 概念应用于 jQuery。一旦你超过 500 行，不这样做只会让你很难跟上内容。

模型

  • 任何本地缓存的数据
  • 饼干
  • 读取/写入服务器（AJAX）

看法

  • 基本上你所有的 DHTML 东西（HTML 生成/操作、CSS 更改、动画/效果等）

控制器

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

为此甚至有一些项目。

于 2010-07-20T14:30:02.323 回答
1

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

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

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

或者

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

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

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

于 2010-07-20T14:34:39.883 回答
1

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

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

于 2010-07-20T14:27:28.760 回答
1

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

自定义事件是可重用小部件的关键。它使代码对 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 元素事件，而是附加到通用小部件事件。试试看。

于 2010-07-20T14:55:55.617 回答
0

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

例子

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、工具、安全性、回调之类的东西等等。

于 2010-07-20T14:35:44.797 回答