prototype.js Element.addMethods

Question

在对jQuery插件的基本了解后，我一直在寻找它也将其转换为原型。

我在此处和插件/扩展幻灯片上找到了此演示文稿，它显示了：

in jQuery ： jQuery.fn.myPlugin = function(args) {return: this;};

in 原型：

Element.addMethods({
  myPlugin: function(element) { 
  return element;
  }
});

我设法将我的简单插件转换为这样的原型，但是现在我想知道这实际上是编写它的正确的方法，还是实际上应该使用类。我对OOP的课程不太了解，但是在谷歌搜索元素上也没有散发出太多光线。

非常感谢！

Answer 1

迟到回复，但基于您的评论，我肯定会为此创建一个课程。

当您要执行与元素实例有关的函数时，扩展元素很有用。通常，至少在原型提供的情况下，这些具有更多的效用性质：更改属性值，从DOM中添加/删除等等。

我无法真正想象一种元素方法可以包含手风琴所需的所有逻辑。您提到您希望能够在同一页面上拥有多个手风琴 - 这不需要它是元素方法。您可以定义一个手风琴课，然后将其实例化。

说您的手风琴课要求您拥有一个容器div，并且所有开放/闭合选项卡（或者您想定义它们）都是直接的后代。您的标记看起来像这样：

<div id="accordion1">
  <div class="slide"><!-- content --></div>
  <div class="slide"><!-- content --></div>
  <div class="slide"><!-- content --></div>
</div>

您要设置课程：

var MyAccordion = Class.create({
  initialize: function(containingElement) {
    var slides = $(containingElement).select('.slide');
    ... do all your other stuff, hook up event handlers to open/close, etc
  }
});

并像这样实例化：

new MyAccordion($('accordion1'));

这肯定会让您有多个实例。这就是使用课程的重点。

如果要扩展元素以添加方法，则必须执行类似的操作才能实例化：

$('accordion1').accordion();

您所有的功能都需要使用该方法，这似乎不如创建类更灵活。这也有点怪异和错。

希望这会有所帮助。让我知道您是否有任何疑问。