molily: DOM - Position im DOMBaum ermitteln

Beitrag lesen

Hallo,

Hast du schon mal daran gedacht, die zusätzlichen Daten nicht in einem getrennten Array vorzuhalten, sondern den DOM-Objekten direkt als zusätzliche Eigenschaft anzuhängen?

Das ist möglich und sehr einfach, aber so löst man das heutzutage nicht mehr. Es ist problematisch ist, JavaScript-Objekte im DOM-Baum zu speichern. Das sind zwei Speicherbereiche, die verschiedener Garbage Collection unterliegen. Browser haben sich schon mehrfach daran verschluckt. Referenzen im DOM sollten sich auf Event-Handler beschränken. Die sind schon problematisch genug, da sie Closures sind.

Wenn man Daten im DOM speichert, dann üblicherweise nicht direkt, sondern über eine UUID. So macht es jQuery.data. Am Element wird nur ein Attribut mit einer fortlaufenden Nummer gespeichert (expando genannt). In einem zentralen Hash werden die Daten unter diesem Key abgelegt. Das sorgt für eine Trennung von DOM- und JavaScript-Objekten. Siehe auch: http://curtistimson.net/Blog/Article/Understanding-jQuery-data()-storage

Wenn man das verbessern möchte, dann würde ich zu einer MVC-Bibliothek raten, die Daten- und Darstellungslogik sauber trennt und per Data-Binding die Darstellung aktualisiert. Das kann z.B. Backbone oder CanJS sein. Dabei liegen die Daten als Models in einer Collection vor. Will man die Reihenfolge ändern, so ändert man sie in der Collection, denn diese ist maßgeblich. Die View überwacht Änderungen an der Collection and passt die Darstellung automatisch an, indem es z.B. die Elemente umsortiert. Die CollectionView von Chaplin macht das sehr effizient. Auch größere JavaScript-Frameworks wie Ember oder Angular arbeiten so.

Mathias