nicht angemeldet
(JavaScript) Klassen oder Objekt Methoden?
StruppiHi,
Untertopic: JavaScript
ich würde gerne wissen, was die bevorzugte Programmiertechnik ist, wenn man Methoden für z.B. ein DOM-Element bereitstellen will.
Beispielsweise um CSS Klassen hinzuzufügen oder zu entfernen.
Ist es besserer Programmierstil, in dem man dann einfach ein Objekt um das DOM-Element wrappt, und die Methode am Objekt zur Verfügung stellt.
Oder stellt man lieber eine statische Methode zur Verfügung, die das Element entgegen nimmt?
Beispiel:
Es gibt Frameworks die machen es etwa so (z.B. YAHOO):
Namespace.Element.addCssClass(element, cssClass);
Und andere (z.B. prototype)
var elem = new Namespace.Element(element);
elem.addCssClass(cssClass);
Ich glaube das prototype Framwork arbeitet sogar, dass die $ Funktion kein DOM-Element zurück gibt, sondern das prototypejs eigene Element Objekt.
Gibt es dann nicht auch Performance Probleme, wenn man sich jedes DOM-Element, was man sich per $ holen will, erst noch gewrappt wird?
Was ist die "Best Practice"? Letzteres sieht zunächst aus wie das Decorator Design Pattern, aber ist es m.E. nicht, da Element nicht von HTMLElement abgeleitet ist.
Oder ist es Jacke wie Hose? Irgendwie machen es ja auch die "großen" alle unterschiedlich.
Ich würde das gerne wissen, da ich mir etwas ähnliches bauen will, allerdings eben sehr abgespeckt, da ich nur wenige Methoden brauche.
Gruß!
-
Was ist die "Best Practice"? Letzteres sieht zunächst aus wie das Decorator Design Pattern, aber ist es m.E. nicht, da Element nicht von HTMLElement abgeleitet ist.
Das Problem ist, dass ein Browser es nicht anders kann, rate welcher...
Oder ist es Jacke wie Hose? Irgendwie machen es ja auch die "großen" alle unterschiedlich.
Ich nehm an die Grossen machen es alle mehr oder weniger gleich.
Struppi.
-
Hallo,
Ich glaube das prototype Framwork arbeitet sogar, dass die $ Funktion kein DOM-Element zurück gibt, sondern das prototypejs eigene Element Objekt.
Nicht ganz. Prototype erweitert das DOM-Element um eigene Methoden. jQuery wrappt es in ein Array-artiges Objekt mit eigenen Methoden.
Gibt es dann nicht auch Performance Probleme, wenn man sich jedes DOM-Element, was man sich per $ holen will, erst noch gewrappt wird?
Ja, natürlich ist das vergleichsweise lahm. Dafür kann man auf diese Weise die Programmierung signifikant vereinfachen.
Was ist die "Best Practice"?
Wie du sagst gibts da je nach Framework unterschiedliche. Das ist eher Geschmackssache, ob man $-Wrapping bevorzugt oder riesige Namespace-Hierarchien wie YUI. Beide sind aktuell und verbreitet. John Resig von jQuery hat aus Spaß mal jQuery mit Klassenhierarchie geschrieben: http://ejohn.org/blog/classy-query/.
Letzteres sieht zunächst aus wie das Decorator Design Pattern, aber ist es m.E. nicht, da Element nicht von HTMLElement abgeleitet ist.
Idealerweise würde man HTMLElement.prototype erweitern, was in einigen Browsern auch funktioniert, aber eben nicht browserübergreifend. Deshalb greifen Frameworks zu Wrappern.
Ich würde das gerne wissen, da ich mir etwas ähnliches bauen will, allerdings eben sehr abgespeckt, da ich nur wenige Methoden brauche.
http://www.dustindiaz.com/roll-out-your-own-interface/
http://aktuell.de.selfhtml.org/weblog/javascript-bibliothekenAber wenn es nur um einige Helferfunktionen geht, würde ich sie einfach in einem eigenen kleinen Namensraum unterbringen. helper.addClass und so weiter.
Mathias
-
Hi,
schöne Antwort!
Wie du sagst gibts da je nach Framework unterschiedliche. Das ist eher Geschmackssache, ob man $-Wrapping bevorzugt oder riesige Namespace-Hierarchien wie YUI. Beide sind aktuell und verbreitet. John Resig von jQuery hat aus Spaß mal jQuery mit Klassenhierarchie geschrieben: http://ejohn.org/blog/classy-query/.
Ich kenn jQuery eigentlich nicht, daher weiß ich auch kaum, wo da jetzt der Unterschied ist. Aber es sieht eher so aus, wie der YUI Style, also als Namespace Hierarchie.
Idealerweise würde man HTMLElement.prototype erweitern, was in einigen Browsern auch funktioniert, aber eben nicht browserübergreifend. Deshalb greifen Frameworks zu Wrappern.
*zustimm*
Ich würde das gerne wissen, da ich mir etwas ähnliches bauen will, allerdings eben sehr abgespeckt, da ich nur wenige Methoden brauche.
Diese dort beschriebene chainability find ich nicht so toll. Arbeitet jQuery nicht genauso? Letztendlich sind doch dann alle Methoden in einem Objekt, und jede Methode gibt immer das Objekt zurück...
Aber übersichtlich ist das m.M. nicht.http://aktuell.de.selfhtml.org/weblog/javascript-bibliotheken
Schönen Artikel hast du da geschrieben!
Aber wenn es nur um einige Helferfunktionen geht, würde ich sie einfach in einem eigenen kleinen Namensraum unterbringen. helper.addClass und so weiter.
Wenn man so etwas anfängt, dann weiß man ja nie, wieviele dieser Helferfunktionen es mal werden. Ich sagte zwar, dass es nur wenige sind, aber es ging mir dennoch eher um das grundsätzliche Design.
Aber als Fazit ziehe ich nun doch erstmal, dass es Geschmackssache ist.
Gruß!
-