Letzten Donnerstag ist ein neues grösseres Release von jQuery erschienen. Welches neben vielen neuen Funktionen auch grosse Geschwindigkeits Verbesserungen mit sich bringt. Neue Funktionen sind zum Beispiel Funktionen wie detatch() oder unwrap(). Bei einemUpdate von Versionen 1.3.* sollte meistens keine Probleme auftreten.  Falls doch, sollte dieses Plugin abhilfe verschaffen. Zudem gibt es neben der total überarbeiteten API Dokumentation einen sehr Praktischen dynamischen API Browser welcher neben den jQuery Funktionen auch die jQuery UI Funktionen beinhaltet. Eine Auflistung aller Neuerungen findet man hier und hier.

Verringerung der komplexität der beliebtesten Funktionen

Heute habe ich  mich intensiv mit der JQuery Funktion “Events/toggle” beschäftigt. Das ganze schien erst ganz einfach denn ich hatte zwei Funktionen welche mir ein JavasScript Event an- und abschalten. Da das ganze aber nicht nur auf einer einfachen Seite war, sondern in Tabs wurde es ein wenig komplizierter. Denn wenn man auf einen anderen Tab springt soll alles verschwinden was der Event ausgelöst hat. Dies war noch ganz einfach, jedoch wenn man auf den Tab zurück geht soll alles wieder wie vorher sein. Die toggle Funktion von jQuery merkt sich jedoch an welcher stelle sie war, was je nach Situation ungewollte Ergebnisse lieferte. Deshalb musste ich das ganze irgendwie zurücksetzen sobald man den Tab verlässt, damit bei der Rückkehr alles reibungslos läuft.

Die jQuery Dokumentation sagt mir, dass ich mit “unbind(‘click’)” den toggle entfernen kann. Wenn ich den toggle dann aber neu hinzufüge ist der Status noch immer der Alte. Nach intensivem debuging fand ich raus, dass das jQuery Objekt einen zusätzlichen Wert “lastToggle” erhält sobald der Toggle Event das erste mal ausgelöst wird. Dieser bleibt auch bei einem “unbind” des toggle Events bestehen. Um dies zu korrigieren, habe ich mir eine kleine Funktion geschrieben:

function resetToggle(selector) {
$(selector).each(function()	{
this.lastToggle = undefined;
});
}

Ist mein jQuery Plugins eins der besten welche im Mai geschrieben/veröffentlicht wurden? Diese Ansicht vertritt auf jeden fall die englische Seite ajaxline.com und nimt mein loadAnimation Plugin in ihre Liste der besten 30 Plugins vom Mai auf. Ob es diese Ehre wirklich verdient weiss ich jedoch nicht den es ist doch recht simpel, doch vielleicht war  genau das einer der entscheidenden Gründe… ich weis es nicht. Ich bedanke mich jedoch für die Linkung auf dem Blog und freue mich darüber, dass ich noch anderen Entwicklern ein wenig Arbeit abnehmen konnte indem ich die Funktion in ein jQuery Addon gepackt habe. Wer es noch nicht kennt und gerne ausprobieren möchte, kann es unter Downloads herunterladen.

jQuery ist ein sehr Praktisches JavaScript Framework, welches einfach zu bedienen und auch ganz schön schnell ist. Seit der Version 1.3 sind die Selectoren auch nochmals um ein vielfaches schneller geworden. Trotzdem ist es, vor allem bei grösseren Projekten, nie verkehrt den JavaScript Code zu optimieren. Dafür habe ich einige einfache Tips, welche helfen die Ausführungszeit des JavaScripts zu verringern.

Herkömliche Browser Funktionen sind immer schneller als Funktionen in einer Library

Beispielsweise sollte man eher das normale for () vom JavaScript benützen als die jQuery Funktion $.each() auch wenn diese mehr Funktionen liefert. Ebenso sollte darauf geachtet werden, dass möglichst wenig Funktionen benützt werden.  Also das man sich erst den gesamten String zusammenbaut und erst danach den String in den Ort im DOM einfügt, an welchem er hin gehört.

Keine langen String Verkettungen machen, stattdessen die Array Fuktion join nützen

 var tmp = '';
for (var i=0; i< =rows.length; i++) {
       tmp += '
'+rows[i]+'';
}
alert(tmp);  

// ist schneller
var tmp = [];
for (var i=1; i< =rows.length; i++) {
      tmp[i] = '
'+rows[i-1]+''; $
}
alert(tmp.join('')); 

Einfachere Selectoren auf kleinere DOM Teile angewendet sind schneller</b><br /> Am schnellsten ist der Selector $(‘#id’). Wenn immer möglich sollte man für jedes Element, welches angesprochen werden soll eine eigene ID setzten und das Element darüber ansprechen. Dies ist auf jeden fall der schnellste Weg ein Element anzusprechen. Der Zweitschnellste, ist dasder Selector $(‘tag’) über einen HTML Tag. Auch Kombiniert sind diese beiden sehr schnell.

var bereich = $('#container');
var link = bereich.find('a');
var tabelle = bereich.find('table');

Ich habe vor ein par Wochen ein kleines Plugin für jQuery geschrieben, welches mir schnell und einfach ermöglicht einen Bereich zu Markieren in welchem gerade etwas geladen wird. Es ist bisher nichts spezielles und wurde eigendlich auch nur für mich geschrieben. Ein Kollege von mir meinte aber bereits auch, dass er dieses Plugin gerne einsetzten würde und so dachte ich mir ich kann es gleich allen zur Verfügung stellen. Ihr könnt es ganz einfach im Downloadbereich herunterladen.

Zu bedienen ist es relativ einfach und lässt sich mit einem kurzen Start und Stop befehl steuern.

// Starten
$('selector').loadAnimation();  

// Stoppen
$.loadAnimation.end();

Zudem kann die Animation auch ein wenig dem Layout angepasst werden in dem man die Farbe, Transparenz, zIndex und ein Bild in der Mitte anzeigt. Ebenso kann man die Geschwindikeit steuren in der die Animation ein- und ausgeblendet wird.

var options = {
// Ein- / Ausblenden
loadSpeed: 'slow',
closeSpeed: 'fast',

// CSS Otionen
zIndex: 998,
opacity: 0.9,

// Farbe
color: '#ccc',

// Bild in der Mitte
image: {
src: '',
alt: 'loading...',

// Grösse des Bildes wird benötigt um das Bild schön
// in der Mitte darzustellen.
size: {
width: 100,
height: 10
}
}
};

// Animation mit Optionenen Starten
$('selector').loadAnimation(options);

Also viel Spass damit… Wenn ihr Fragen habt oder Bugs gefunden habt, schreibt dies einfach in die Kommentare.