Eine Frage an die jQuery-Spezis

[heinetz]

Hallo Forum,

ich programmiere seit langem Javascript und habe mir im letzten Jahr nun endlich mal ein JS-Framework angeguckt. Nach einigem hin- und her hatte ich mich für jQuery entschieden und war relativ schnell begeistert begeistert davon 'write less - do more'.

Nun habe ich eine kleine Applikation entwickelt, in der drei jQuery-Plugins miteinander kommunizieren. UI Layout teilt das Browser-Fenster in zwei Bereiche auf. Links wird eine Baumstruktur mit JSTree dargestellt. Rechts eine Liste mit jQGrid geladen, nachdem man einen Knoten in dem Baum klickt.
Jetzt brauche ich einen weiteren Bereich, in dem ein Formular angezeigt wird, dessen Inhalte abhängig vom geklickten Knoten sind. So weit so gut. Das leere Formular ist da, und gefüllt wird es nun durch einen Anweisung im onselect-Callback des JSTree-Pugins.

Das funktioniert, gefällt mir aber nicht ;)

Statt:

onselect:function(NODE){
 - hole die daten abhänig von NODE per ajax und befülle damit die
   Variable json
 - mache z.B. aus json.valid_date, in dem ein Unix-Timestamp steht
   ein lesbares Datum.
 - mache um das Formularfeld '#valid_date' einen roten Rand, weil
   das Datum in der Vergangenheit liegt.
 - befülle das Formular '#dataForm' mit Daten aus der Variable json
 ...
}

... hätte ich lieber:

onselect:function(NODE){
 $('#dataForm').init(NODE)
}

... um die Daten für das Formular in der Methode init() aufzubereiten, statt im callback 'onselect'.

Ist das dann ein Plugin?

beste gruesse,
heinetz

[molily]

Hallo,

ja, du kannst das mit einem jQuery-Plugin umsetzen. Das ist eine Möglichkeit, Code objektorientiert zu strukturieren, welche bei DOM-Operationen naheliegt. Direkt im onchange-Handler sollte es nicht stehen, da hast du Recht.

Andere Möglichkeiten wären ein Object-Literal, ein Modul oder Konstruktoren, Prototypen, Instanzen (Pseudoklassen).

... hätte ich lieber:

onselect:function(NODE){
$('#dataForm').init(NODE)
}

Das ist ja schon eine gute Abstraktion. Du behandelst hier das Formular als Objekt, welches initialisiert wird.
Wenn du den Weg eines jQuery-Plugins gehst, dann solltest du die Methode allerdings nicht init nennen, sondern ihr einen spezifischeren Namen geben.

Welche Variante du wählst, kannst du dir aussuchen:

// jQuery-Plugin
$('#dataForm').dataForm(NODE)

// Singleton-Modul
DataForm.init('#dataForm', NODE);

// Konstruktor
new DataForm('#dataForm', NODE);

In allen Fällen könntest du den Code intern gut strukturieren und beispielsweise auf verschiedene Funktionen aufteilen.

Mathias