javascript - OO JQuery 和类

Question

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

我已经搜索了一下，并没有找到太多关于它的东西。Digg 似乎已经推出了自己的，但我不确定这是否是我应该使用的东西。有没有更好的办法？人们通常如何使用 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 编写这种对象类？

score 21 · Accepted Answer

您可能会发现这种方法对关键任务很有用：构建一个面向对象的 jquery 插件。

还有这篇关于Ajaxian的文章《一个真正的带有jquery的OO类系统》。

score 4 · Accepted Answer

嗯……有趣。我们有 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();
  });
};

score 2 · Accepted Answer

2

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

于 2012-01-23T04:52:13.810 回答

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

插件有时可以解决问题。

当然，您可以使用足够多的 mootools 来获得它的类/继承模型。随着document.id1.2.3 中“兼容模式”的实现，你可以吃蛋糕也可以吃（我想——我自己还没做过。）

javascript - OO JQuery 和类

8 回答 8

Related

Reference