JQuery Kochbuch (German Edition)

Datenpuffer von jQuery (
jQuery.cache
).
    Selbst wenn Sie sich dazu entschließen, ein DOM-Element zu nutzen, sind die Prinzipien identisch. DOM-Elemente können manchmal sinnvoller sein. Wenn Sie zum Beispiel ein Tabellen-Plugin schreiben, ist es sinnvoll, jedes

-Element als Event-Listener zu nutzen.
    Das Problem bei den DOM-Elementen besteht in vielen Browsern darin, dass sie die Hauptursache für Speicherlecks sind.Speicherlecks treten dann auf, wenn es Speicher gibt, die nicht von der JavaScript-Engine freigegeben werden können, wenn der Anwender eine Seite verlässt.
    Sie sollte beim Sichern Ihrer Daten in Objekten sehr viel vorsichtiger sein, wenn Sie DOM-Elemente nutzen. Dies ist der Grund, warum jQuery die Methode
data()
bereitstellt.
    Ich würde in den meisten Situationen trotzdem normale JavaScript-Objekte nutzen. Sie können ihnen Attribute und Funktionen hinzufügen und die Wahrscheinlichkeit für Speicherlecks und auch deren Größe werden geringer sein.
    Diskussion
    Vor- und Nachteile
    Wie schon im Titel des Rezepts angedeutet, ist dieses Vorgehen schneller. Sie lösen immer Events für einzelne Objekte aus und nicht für die n Einträge in
jQuery.cache
.
    Der Nachteil dieses Vorgehens ist der, dass jeder das Event-Listener-Objekt (
jQuery.page
im Beispiel) kennen muss, um eines der Events zu binden oder auszulösen.
    Das kann von Nachteil sein, wenn Sie versuchen, Ihren Code so gut wie möglich zu kapseln. [ 16 ]
    Das Konzept des Kapselns ist in der objektorientierten Programmierung sehr wichtig und dort sollten Sie dieses Thema auch sorgfältig durchdenken.
    Bei der jQuery-Programmierung ist das nicht so wichtig, da es sich nicht um objektorientierte Programmierung handelt und die meisten Anwender sich auch keine großen Gedanken um die Kapselung machen. Trotzdem sollte es hier nicht unerwähnt bleiben.
    Den Listenern weitere Funktionalität verpassen
    Die erwähnten Listener-Objekte müssen keine simplen Dummy-Objekte sein, die nichts anderes kennen als
bind()
,
unbind()
und
trigger()
(soweit es uns betrifft).
    Diese Objekte können auch Methoden und Attribute besitzen, die für uns sehr nützlich sind.
    Ein Problem gibt es allerdings. Nehmen wir an, wir wollen eigentlich Folgendes erreichen, um das Attribut
number
anzusprechen:
jQuery.page = jQuery({ number:1 });
    Wir müssten allerdings wie folgt vorgehen:
jQuery.page.number; // undefined
jQuery.page[0].number; // 1
    Das liegt an der Art, wie jQuery mit HTML-Knoten arbeitet.
    Aber halt! Es gibt einen einfachen Workaround dafür. Lassen Sie uns ein kleines Plugin erstellen:
(function( $ ){

    // Diese Methoden werden von jQuery.fn in unseren Prototypen kopiert
    var copiedMethods = 'bind unbind one trigger triggerHandler'.split(' ');

    // leerer Konstruktor
    function Listener(){
    };

    $.each(copiedMethods, function(i,name){
     Listener.prototype[name] = $.fn[name];
    });

    // Unser "jQuery.fn.each" muss ersetzt werden
    Listener.prototype.each = function(fn) {
     fn.call(this);
     return this;
    };

    $.listener = function( data ){
     return $.extend(new Listener(), data);
    };

})( jQuery );
    Jetzt können wir Objekte erzeugen, die alle benötigten Event-Methoden von jQuery besitzen, aber der Gültigkeitsbereich der Funktionen, die wir an
bind()
,
unbind()
und so weiter übergeben, wird der des Objekts selbst sein (in unserem Beispiel
jQuery.page
).
    Beachten Sie, dass unsere Listener-Objekte nicht alle jQuery-Methoden besitzen, sondern nur die, die wir kopiert haben. Sie können zwar noch mehr Methoden hinzufügen, aber die meisten davon werden nicht funktionieren. Dazu bräuchten wir eine komplexere Implementierung – wir werden bei der vorliegenden bleiben, da sie unsere Erfordernisse abdeckt.
    Jetzt haben wir dieses Mini-Plugin und können folgenden Code schreiben:
jQuery.page = jQuery.listener( {
    title: 'Start',
    changeTo: function( title ){
     this.title = title;
     this.trigger('change');
    }
} ) ; jQuery.page.changeTo ('Inbox');
    Da Sie aus den Handlern heraus mit
this
auf das Objekt zugreifen können, müssen Sie Werte wie den Titel nicht mehr als Argument an den Handler übergeben. Stattdessen nutzen Sie einfach
this.title
, um auf den Wert zuzugreifen:
jQuery.page.bind('change', function(e){
    jQuery('#text1').text( 'Seite ist ' + this.title );
});

Eigene Events erstellen
    Problem
    Sie wollen einem Element bestimmte Verhaltensweisen entlocken, wenn es an ein Event gebunden wird.
    Lösung
    Mit
jQuery.event.special
können Sie das erreichen.