Question

我正在开发一个网站并且第一次使用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编写这种对象类？

Answer 1

您可能会发现此方法对于涉及的任务非常有用：building an object-oriented jquery plugin.

这篇关于Ajaxian的文章“a real OO class system with jquery”。

Answer 2

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

那么为什么你需要在jQuery中有额外的OO功能，除非你想从其他jQuery插件继承？

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

$(".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();
  });
};

Answer 3

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

Answer 4

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

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

Answer 5

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

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

Joose虽然没有提供测试框架/包管理设施，但在优秀方面表现出色先进的属性管理设施，过滤器和更好的内省设施。

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

Answer 6

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

Answer 7

问题是......你为什么要离开MooTools它是否符合你的需求？在我看来，MooTools工作得很好，而且MooTools不能做任何jQuery。（事实恰恰相反）。

不幸的是，jQuery并不是为支持经典OOP而构建的，因为MooTools是你需要将你的类编写为jQuery插件。

Answer 8

插件有时可以解决问题。

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

OO JQuery和类

8 个答案: