OO JQuery 和类答案

【问题标题】：OO JQuery and classesOO JQuery 和类
【发布时间】：2010-11-18 01:14:51
【问题描述】：

我在一个网站上工作，基本上是第一次使用 JQuery。我在以前的项目中主要使用 MooTools，并且我有一些使用 MooTools Class 结构编写的小部件类。我想将它们移植到 JQuery，但在我看来，就对象类而言，没有什么类似于 MooTools 的功能。

我搜索了一下，并没有找到太多关于它的信息。 Digg 似乎有rolled their own，但我不确定这是否是我应该使用的东西。有没有更好的办法？人们通常如何使用 JQuery 来面向对象？封装 UI 小部件（或任何功能类结构）的常用方法是什么？

我将发布一个可能的 MooTools 小部件类的假示例：

var ZombatWidget = new Class({
    Extends: BaseWidget,
    widgetPropertyX = 'prop1',
    widgetPropertyY = 'prop2',
    attach = function(el) {
        var f = function() { 
            //do something widgety
        };
        el.addEvent('dblclick',f);
        el.addClass('widgetized');
    }
});

var z = new ZombatWidget();
z.attach($('widgetDiv'));

我所拥有的比这要大得多，但你明白了。我需要将其转换为类/继承结构的prototype 方法吗？你会如何使用 JQuery 编写这种对象类？

【问题讨论】：

标签： javascript jquery oop mootools

【解决方案1】：

您可能会发现这种方法对所涉及的任务很有用：building an object-oriented jquery plugin.

还有这篇关于阿贾克斯的文章“a real OO class system with jquery”。

【讨论】：

【解决方案2】：

嗯...有趣。我们有 jQuery，恕我直言，它是与 DOM 交互的好工具。这是一个选择工具，您可以在其中编写自己的代码（插件）来修改所选项目。您可以在这里与您自己的（面向对象的）插件中的代码进行交互，以做一些非常酷的事情。

那么，除非您希望能够从其他 jQuery 插件继承，否则为什么您需要 jQuery 中额外的 OO 功能？

因为您可能有一个插件可以让您执行以下操作：

$(".spiffyness").yourSpiffyficationPlugin1();

而且，虽然已经做了一些非常酷的令人敬畏的事情，但您还需要在此基础上更加出色。

因此，您希望从您的第一个插件继承，结果是：

$(".spiffyness").yourSpiffyficationPlugin2(); //plugin inherited from 1

但是……你这样做是不是也能到达那里：

$(".spiffyness").yourSpiffyficationPlugin1().yourSpiffyficationPlugin2();

第二个插件在第一个插件之上做了这个微小（但很棒;））的事情吗？

换句话说：你想要的，是否值得为了 OO 纯粹主义而付出努力？还是 jQuery 管道机制足够好，也许你需要的一切？

我想说，责任分离和/或你的 mootools 思维方式可能是这里的真正问题。让 jQuery 做它擅长的事情，使用它强大的管道机制，管道你自己的插件（其中可能包含大量花哨的 OO 东西）......并且你可以在你的代码仍然干净的情况下获得很好的结果。

如果您认为我在这里的想法过于简单，欢迎提供一个很好的例子来说明您的观点的精髓！ :-)

为了领先一步，如果您正在做一些非常高级的事情，并且您不能简单地在其他事情之上做某事，那么您的插件也可以委托给您的一个 OO 类。例如。喜欢：

$.fn.totalAwesomeness = function(options) {
  var defaults = {
    mode: 1,
    title: 'Awesome'
  };
  var opts = $.extend(defaults, options);
  return this.each(function() {
    var $this = $(this);
    var handler = null;
    if(defaults.mode == 1)
       handler = new com.myStuff.class1($this);
    else if(defaults.mode == 2)
   handler = new com.myStuff.class2($this); //class2 inherits from class1 
    handler.doMagic();
  });
};

【讨论】：

Mootools 类有助于保持代码的简单和结构化。作为一个非 JQuery 用户，我无法快速浏览一下 JQuery 插件。 Mootools 插件类通常更具可读性，即使 js 经验非常低。

【解决方案3】：

您也可以随时使用 moo4q - http://moo4q.com/ 。它为 jQuery 添加了 MooTools 类支持。

【讨论】：

值得一提的是，这种方法需要您运行 MooTools 以及 jQuery。您可以进行自定义构建以获取 MooTools 的 Class 对象，但它需要引入 MooTools 扩展的许多其他东西。可能并不适合所有人。

【解决方案4】：

前段时间写了一篇关于jQuery面向对象插件的文章，希望对你有所帮助

http://ajax911.com/jquery-object-oriented-plugins/

【讨论】：

【解决方案5】：

有第三方 javascript 类实现提供了非常强大的自省功能。我想特别强调JS.Class 和Joose。 JS.Class 以 Ruby 为模型，而 Joose 以 Moose 为模型。我不是 mootools 用户，所以我无法评论他们在 mootools 方面的优势/劣势。但我会总结一下它们的主要特点。

JS.Class 非常注重模拟 Ruby 的面向对象的特性，并且在这方面做得很好。它提供了一个模仿 Ruby 标准库的强大库，并带有一个集成良好的包管理和测试框架。

Joose 虽然不提供测试框架/包管理设施，但在以下方面表现出色先进的属性管理设施、过滤器和更好的自省设施。

它们都有很好的文档，可以在浏览器和服务器中使用。

【讨论】：

【解决方案6】：

我刚刚完成了我的迷你项目的第一个版本：https://github.com/op1ekun/plOOgins。这完全是关于编写用作 Jquery 插件的 OOP 代码。这不是火箭科学，只是我们想在我的工作场所使用的一点东西。也许它会对你有所帮助。祝你好运！

【讨论】：

【解决方案7】：

插件有时可以解决问题。

当然，您可以使用足够多的 mootools 来获得它的类/继承模型。通过在 1.2.3 中实现document.id“兼容模式”，您可以拥有自己的蛋糕并吃掉它（我想——我自己还没有做过。）

【讨论】：

【解决方案8】：

问题是...您为什么要放弃 MooTools 是否符合您的需求？在我看来，MooTools 工作得很好，而且 jQuery 没有什么是 MooTools 做不到的。（反之则不然）。

不幸的是，jQuery 不像 MooTools 那样支持经典 OOP，因此您需要将类编写为 jQuery 插件。

【讨论】：

呃...不，这不是问题所在。既然你问了，JQuery 是项目规范的一部分，不是我写的。如果可以转换我的 MooTools 类，我想把它们带过来，这样我就不必为 JQuery 重写它们。
@zombat: jQuery 没有类的功能，你需要用 jQuery 重写它们。