JQuery Kochbuch (German Edition)

Problemen. jQuery stellt den Entwicklern die intuitive und elegante Methode
.data()
bereit, die Entwicklern dabei hilft, Speicherlecks zu vermeiden:
$('#myId').data('myObject', {
    label: $('#myLabel')[0]
});

var myObject = $('#myId').data('myObject');
myObject.label;
    Diskussion
    In diesem Rezept nutzen wir die Methode
.data()
, die uns Zugriff auf unsere Daten verleiht und eine saubere Trennung zwischen Daten und Markup ermöglicht.
    Ein weiterer Vorteil liegt darin, dass die Events
getData
und
setData
für das Ziel-Element implizit getriggert werden.Mit dem HTML-Code

    können wir so bestimmte Dinge separieren (Modell und View), indem wir einen Handler für das Event
setData
setzen, der drei Argumente erhält (das
event
-Objekt, sowie
key
und
value
für die Daten):
// Auf neue Daten warten
$(document).bind('setData', function(evt, key, value) {
    if ( key == 'clock' ) {
     $('.updateTime').html( value );
    }
});
    Das Event
setData
wird dann bei jedem Aufruf von
.data()
für das document-Element ausgelöst:
// 'time'-Daten für jedes Element mit der Klasse 'updateTime' aktualisieren
setInterval(function() {
    $(document).data('clock', (new Date()).toString() );
}, 1000);
    Damit wird in diesem Beispiel jede Sekunde (alle 1.000 Millisekunden) die Dateneigenschaft
clock
des
document
-Objekts gesetzt, wodurch wiederum das an
document
gebundene Event
setData
ausgelöst und die aktuelle Zeit angezeigt wird.

Objekte durch jQuery.extend erweitern
    Problem
    Sie haben ein Plugin entwickelt und müssen Standard-Optionen bereitstellen, die vom Anwender überschrieben werden können.
    Lösung
(function($) {
$.fn.myPlugin = function(options) {
     options = $.extend({
     message: 'Hallo Welt',
     css: {
     color: 'red'
     }
     }, options);
     return this.each(function() {
     $(this).css(options.css).html(options.message);
     });
    };
})(jQuery);
    Diskussion
    Hier nutzen wir die von jQuery bereitgestellte Methode
$.extend()
.
$.extend()
gibt eine Referenz auf das erste übergebene Objekt zurück, während die darauf folgenden Objekte die von ihnen definierten Eigenschaften überschreiben. Der folgende Code zeigt, wie das funktioniert:
var obj = { hello: 'Welt' };
obj = $.extend(obj, { hello: 'große Welt' }, { foo: 'bar' });

alert( obj.hello ); // Alert: 'große Welt'
alert( obj.foo ); // Alert: 'bar';
    Damit kann
myPlugin()
in unserem Beispiel ein
options
übergeben werden, das unsere Standard-Einstellungen überschreibt. Der folgende Code zeigt, wie ein Anwender die mitgelieferte CSS-Einstellung
color
überschreiben würde:
$('div').myPlugin({ css: { color: 'blue' } });
    Ein Spezialfall der Methode
$.extend()
tritt dann ein, wenn man ein einzelnes Objekt übergibt. Dann wird das grundlegende jQuery-Objekt erweitert. So können wir unser Plugin zum Erweitern des jQuery-Core wie folgt definieren:
$.fn.extend({
    myPlugin: function() {
     options = $.extend({
     message: 'Hallo Welt',
     css: {
     color: 'red'
     }
     }, options);
     return this.each(function() {
     $(this).css(options.css).html(options.message);
     });
    }
});
    $.extend()
bietet auch eine Möglichkeit für eine tiefe (oder rekursive) Kopie an. Diese erzielt man, indem man als ersten Parameter den Booleschen Wert
true
angibt. Hier ein Beispiel für eine tiefe Kopie:
var obj1 = { foo: { bar: '123', baz: '456' }, hello: 'Welt' };
var obj2 = { foo: { car: '789' } };

var obj3 = $.extend( obj1, obj2 );
    Ohne die Übergabe von
true
würde
obj3
Folgendes enthalten:
{ foo: { car: '789 }, hello: 'Welt' }
    Durch die Angabe einer tiefen Kopie würde
obj3
nach dem rekursiven Kopieren aller Eigenschaften so aussehen:
var obj3 = $.extend( true, obj1, obj2 );
// obj3
{ foo: { bar: '123', baz: '456', car: '789 }, hello: 'Welt' }

Chapter 5. Schneller, Einfacher, Spaßiger
    Michael Geary
    Scott González

Einführung
    Nahezu jeden Tag fragt jemand in der Google Group von jQuery, wie er seinen Code einfacher oder schneller machen kann oder wie man einen Codeabschnitt debugt, der nicht läuft.
    Dieses Kapitel will Ihnen dabei helfen, Ihren jQuery-Code zu vereinfachen, wodurch er leichter lesbar wird und es auch mehr Spaß macht, mit ihm zu arbeiten. Wir werden nun ein paar Tipps vorstellen, wie man Fehler findet und behebt.
    Wir werden Ihnen auch dabei helfen, Ihren Code schneller zu gestalten und – genauso wichtig – die Code-Abschnitte zu finden, die überhaupt beschleunigt werden müssen. Denn dann haben die Besucher Ihrer Site mehr Freude und schauen auch