Abro, Januar 2009

Neue Features in jQuery 1.3

jquery1.3 logoJQuery 1.3 ist hiermit offiziel released und es bringt wie gehofft einiges an Neuerungen. In erster Linie wird sich das auf die Performance und benutzbarkeit beziehen und weniger auf erneute Komplettumkrempeleien der Funktionsweise.

So ist z.B. die DOM-Manipulation jetzt insgesamt ca. 6x so schnell wie unter jQuery 1.2.6.. Verursacher dieses Glücksfalls ist eine Technik die den zu bearbeitenden Code zerhackstückelt und auf ein minimum reduziert. Die Basis dazu nennt sich DOM-Document-Fragments und wurde von John Resig implementiert. Der ursprüngliche Code dazu war im FF und Opera ca. doppelt so schnell, wie normal und im IE betrugt die Steigerung sogar das Dreifache.

Sicherlich am interessantesten ist die neue CSS-Selektor Engine “Sizzle”, welche ebenfalls John Resig’s Kind ist. Was nicht verwundert, da er als Initiator an der Spitze des jQuery-Vorstands tront. Sizzle, welche mittlerweile auch schon ein Dojo Fundation Projekt ist, soll nach den Wünschen des Hauptentwicklers eine einheitliche Bibliothek für alle Javascript Frameworks werden, die die performantestent Ideen vieler Projekte vereinigt. Aber das heisst noch lange nicht DOT-Sizzle statt DOT-NET … auch wenn die Idee verlockend ist. Sizzle wurde in nur ein paar Monaten aus dem Boden gestampft (nämlich seit August 2008) und ist mit nur 850 Zeilen Code verdammt klein. Ich hab es noch nicht in JSmin geworfen, aber inklusive gzip sollen daraus 3kB werden, was sich hören lassen kann. Die funktionalität ist sehr Hackfrei, benutzt also kein “Browser-Sniffing” und kommt auch ohne XPath aus.

Auch sonst habe ich einiges an Speedups im Source entdeckt. Was die Damen und Herren nicht alles beachten mussten, mag ich hier wegen der lesbarkeit gar nicht erst anschneiden.


Neue und geänderte Funktionen

.toggleClass() kann immerhin mindestens 3 weitere Zeilen Code sparen.
Nach meinen nächtlichen Erkenntnissen wird im ersten Attribut ein String “CSS-Klasse” oder Leerzeichen separierter String “CSS-Klasse CSS-KLasse” erwartet und im zweiten, wohl leider nicht optionalen, ein Boolean-Wert. Ist letzterer True werden die übergebenen Klassen hinzugefügt und bei False dagegen natürlich herausgelöscht.

Bisher:

1
2
3
4
if( $('element').hasClass('selectet') && $('element').hasClass('active') )
  $('element').removeClass('selected active');
else
  $('element').addClass('selected active');

Jetzt könnte man:

1
2
3
4
$('element').toggleClass(
  'selected active',
  !($('element').hasClass('selectet') && $('element').hasClass('active'))
);

Besser ist aber für dieses Beispiel:

1
$('element').toggleClass( 'selected active', '' );

…denn unsere Bedingung ist äquivalent zu dem Fallback, welches vom JQuery-Core immer ausgeführt wird,
wenn der zweite parameter nicht vom Typ Boolean ist.

.val() funktioniert jetzt anders bei option-Tags bzw. selects.

1
2
3
4
5
6
<select name="select-1" id="select-1" multiple="multiple">
  <option id="opt-1a" value=""                     >Empty String</option>
  <option id="opt-1b" value="1" selected="selected">1</option>
  <option id="opt-1c" value="2" selected="selected">2</option>
  <option id="opt-1d"                              >Mein Text</option>
</select>
1
2
3
4
5
$('#opt-1a').val()   == ''
$('#opt-1b').val()   == '1'
$('#opt-1c').val()   == '2'
$('#opt-1d').val()   == 'Mein Text' //!!!
$('#select-1').val() == ['1','2']

Damit sollte so weit alles klar sein. $(‘select’).val() gibt zurück was selektiert ist und sind es mehrere Elemente, dann als Array.
Hat ein option-Tag kein value-Attribut so bekommt man immer seinen Text zurück.

.isArray() prüft ob ein Element ein Array ist. Zählt also (im moment jedenfalls) nicht für Array ähnliche Objekte.

1
2
3
4
5
var arr = [1,2];
var el  = $('table');
 
$.isArray(arr) == true
$.isArray(el)  == false

.isFunction() testet Typen auf JQuery-, oder selbstdefinierten Funktionen (nicht jedoch für DOM-Funktionen!)

1
2
3
4
5
6
var fn = function(){};
var el = document.body.firstChild;
 
$.isFunction(fn) == true
$.isFunction(el) == false
$.isFunction()   == false

.size() ist ein verkettungs-Ersatz für .length

1
2
<p></p>
<p></p>
1
$('p').size() == 2

.className ist ein Ersatz für .attr(‘class’).

1
2
<p id="p-1" class="foo bar"></p>
<p id="p-2"></p>
1
2
$('#p-1').className == 'foo bar'
$('#p-1').className == ''

.live() / .die() helfen uns endlich auch Events für Elemente zu managen, die es noch garnicht gibt.

1
2
3
4
//event zu passenden elementen hinzufügen & überwachen
$('div.attach-events').live('click', fn);
//überwachung anhalten
$('div.attach-events').die('click');

Alle Argumente für die(); sind übigens optional. So kann man entscheiden ob alle Events entbunden werden sollen, alle Funktionen für nur ein Event, oder gar nur eine Funktion für ein Event.

.closest() findet das nächste übergeordnete machtende Element, beginnend bei $(this).

1
2
3
4
5
6
7
8
<ul>
  <li id="p1"> Punkt 1
    <ul>
      <li id="p1-1">Punkt 1.1</li>
      <li id="p1-2">Punkt 1.2</li>
    </ul>
  </li>
</ul>
1
2
$('#p1-2').closest('li'); //Punkt 1.2
$('ul ul').closest('li'); //Punkt 1

.support ist zum Browserfunktionen testen da

…und tatsächlich ist $.browser damit nun angeblich schon deprecated. dieses neue feature konzentriert sich aber hauptsächlich auf bugs oder nicht-funktionalitäten, denn auf komplette auflistungen unterstützter services. Man muss dann also künftig wohl etwas konkreter werden was man will, oder das feature ab der übernächsten version selbst noch einmal schreiben. Die Community schreibt das Framework ja glücklicherweise auch in jQuery.

Beispiele:

1
2
3
4
$.support.hrefNormalized    // urls vom browser manipuliert?
$.support.leadingWhitespace // wird führender whitespace beim einfügen gelöscht?
$.support.objectAll         // elemente aus objekt-Tags lesbar ?
$.support.tbody             // tbody automatisch eingefügt ?

RegExp-Selektion

…soll (ich habe das nicht genau geprüft) durch die neue CSS-Selektor engine wieder vernünftig möglich sein.
Trotzdem bitte nicht zu exzessiv benutzen … Regular Expressions werden wirklich recht schnell recht langsam, no?


Mehr spannendes

Events “bubblen” jetzt im DOM auf. Und das ist die offizielle Bezeichnung seitens der W3C Spezifikation, meine Herren. Also um es kurz zu machen “Bubbling” ist eine mögliche praxis beim ausführen eines fast jeden Events. Das macht einfach alles klarer, weniger fehleranfällig und auch wenns ins detail gehen soll immer noch präzise zu codieren. Man stelle sich einfach folgende Situation vor:
Wir haben 2 Elemente ineinander geschachtelt, beiden ist z.B. ein “.click(function(){alert(‘Foo’)});” mitgegeben.
Gesetzt der fall man klickt nun auf das innerste Element, dann ist nicht ganz klar welches zuerst sein alert auslösen darf.

Nach dem Bubble Prinzip läuft es einfach von innen nach außen und damit ist die Sache gegessen.
Ob das in der Finalen Version alle Browser gleich händeln bleibt natürlich abzuwarten.

In diesem Zusammenhang hat die Community dann natürlich auch an den korrespondierenden “Cancels” gefeilt. Wer sich einmal genauer über DOM-Events informieren möchte, dem kann ich natürlich einmal wieder Wikipedia empfehlen: http://en.wikipedia.org/wiki/DOM_Events

Insgesamt für mich ein verhältnismäßig schlankes Update, welches aber genug Vorteile mit sich bringt, um den Migrationsaufwand zu rechtfertigen. Als letzten Punkt möchte ich an dieser Stelle noch auf einen Artikel verweisen, der sich mit der Integration von JQuery in MS Visual Studio 2010 befasst. Cheers 2009 !


Kommentare sind geschlossen.
Aufgrund interner Umstrukturierungsmaßnahmen ist es uns z.Zt. leider nicht
möglich auf neue Kommentare zu reagieren. Wir bitten dies zu entschuldigen.
Bei dringenden Rückfragen suchen Sie bitten den direkten Kontakt zu uns.
Das Unternehmen Lucido Media GbR wurde am 31.12.2013 stillgelegt. Diese Website existiert weiterhin zu Archivzwecken. Der Gesellschafter Daniel Abromeit führt seine Arbeit ab sofort unter dem Dach der Agentur Koch Essen fort. Für entsprechende Anfragen wenden Sie sich daher bitte an https://koch-essen.de/kontakt/