jquery - prototype.js Element.addMethods

Question

在基本了解 jQuery 插件的构建方式之后，我一直在考虑将其转换为 Prototype。

我找到了this presentation here在插件/扩展幻灯片上，它显示:

在 jQuery 中:jQuery.fn.myPlugin = function(args) {return: this;};

在原型(prototype)中:

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

我设法将我的简单插件转换为这样的原型(prototype)，但现在我想知道这实际上是否是正确的编写方式，或者是否应该实际使用类。我对 OOP 中的类了解不多，但在谷歌上搜索 Element.addMethods 也没有得到太多启发。

非常感谢!

Answer 1

回复晚了，但根据您的评论，我肯定会为此创建一个类(class)。

当您想要执行与元素实例相关的功能时，扩展元素非常有用。通常，至少对于 Prototype 提供的那些，它们具有更多的实用性:更改属性值、从 dom 添加/删除等。

我真的无法想象一个元素方法可以包含 Accordion 所需的所有逻辑。您提到您希望能够在同一页面上有多个 Accordion - 这并不要求它是一个元素方法。 You can define an accordion class ，然后为您想要使用它的每个位置实例化它。

假设您的 Accordion 类要求您有一个容器 div，并且所有打开/关闭选项卡(或者您想要定义它们的方式)都是直接后代。您的标记将如下所示:

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

您将设置您的类(class):

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'));

这肯定会让您拥有多个实例。这就是使用类的全部意义。

如果您要扩展 Element 以添加方法，则必须执行类似以下操作来实例化:

$('accordion1').accordion();

您的所有功能都需要在该方法中，这似乎不如创建类灵活。只是感觉有点奇怪和错误。

希望这有帮助。如果您有任何疑问，请告诉我。