prototype.js Element.addMethods - jquery, plugins, prototypejs

Nachdem ich ein grundlegendes Verständnis dafür entwickelt habe, wie ein jQuery-Plugin erstellt wird, habe ich versucht, es auch in Prototype umzuwandeln.

ich fand diese Präsentation hier und auf der Plugin / Extensions-Folie zeigt es:

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

im Prototyp:

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

Ich habe es geschafft, mein einfaches Plugin so in Prototype umzuwandeln, aber jetzt frage ich mich, ob das tatsächlich der Fall ist richtig Möglichkeit, es zu schreiben, oder wenn man eigentlich Klassen benutzen sollte. Ich weiß nicht viel über OOP-Klassen, aber ich habe über Element gegoogelt. Add.Methods hat auch nicht viel Licht gebracht.

Danke vielmals!

Antworten:

2 für die Antwort № 1

Späte Antwort, aber basierend auf deinen Kommentaren habe ich definitiv eine Klasse dafür erstellt.

Erweitern Elemente ist nützlich, wenn Sie möchteneine Funktion ausführen, die sich auf eine Elementinstanz bezieht. In der Regel haben diese, zumindest mit denen, die von Prototype bereitgestellt werden, eher eine Dienstprogrammeigenschaft: Ändern von Attributwerten, Hinzufügen / Entfernen von Dom usw.

Ich kann mir wirklich keine Element-Methode vorstellenkönnte die gesamte für ein Akkordeon erforderliche Logik umfassen. Du hast erwähnt, dass du mehrere Akkordeons auf derselben Seite haben willst - das erfordert nicht, dass es eine Element-Methode ist. Sie können eine Akkordeon-Klasse definieren, dann instanziieren Sie es für jede Stelle, die Sie verwenden möchten.

Angenommen, Ihre Akkordeonklasse erfordert, dass Sie ein Container-div haben, und alle öffnenden / schließenden Tabs (oder wie auch immer Sie sie definieren möchten) sind direkte Nachkommen. Ihr Markup würde folgendermaßen aussehen:

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

Du hast deine Klasse eingerichtet:

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

Und instanziiere es so:

new MyAccordion($("accordion1"));

Dies wird Ihnen mehrere Instanzen ermöglichen. Das ist der Sinn von Klassen.

Wenn Sie Element erweitern möchten, um Methoden hinzuzufügen, müssen Sie Folgendes tun, um Folgendes zu instanziieren:

$("accordion1").accordion();

All Ihre Funktionalität müsste in dieser einen Methode enthalten sein, die weniger flexibel zu sein scheint als das Erstellen einer Klasse. Es fühlt sich einfach ein bisschen komisch und falsch an.

Hoffe das hilft. Lass es mich wissen, wenn du irgendwelche Fragen hast.

---