201320Mai

jQuery: Native JavaScript-Äquivalente zu Funktionen

Frameworks wie jQuery oder MooTools zeichnen sich vor allem durch ihre einfache und intuitive Schreibweise aus. Hinter den Framework-Funktionen stecken meist komplexere Mechanismen, da Elemente mit speziellen Eigenschaften ausgestattet werden. Manche Funktionalitäten lassen sich aber mittlerweile auch sehr leicht nativ umsetzen, wodurch die Performance erhöht werden kann. Dieser Aspekt ist gerade bei mobilen Geräten sehr wichtig, da hier die Qualität einer WebApp durch übermäßige jQuery-Operationen schnell sinken kann.
Lee Brimelow von Adobe hat in einem Beitrag ein paar jQuery-Funktionen aufgezeigt, die in aktuellen Browsern mit nativen JavaScript-Funktionen ersetzt werden können.

Lee Brimelow - Native equivalents of jQuery functions

In der Aufzählung finden sich so die Äquivalente für Selektoren, DOM-Manipulationen und CSS-Änderungen, wie zum Beispiel:

  • jQuery:
  • $(document.body).append("<div id='myDiv'><img src='im.gif' /></div>");
  •  
  • JavaScript:
  • var frag = document.createDocumentFragment();
  •  
  • var myDiv = document.createElement("div");
  • myDiv.id = "myDiv";
  •  
  • var im = document.createElement("img");
  • im.src = "im.gif";
  •  
  • myDiv.appendChild(im);
  • frag.appendChild(myDiv);
  • document.body.appendChild(frag);

Sicherleicht ist die jQuery-Syntax kompakter, aber die native Schreibweise lässt sich einfach in einer Funktion verpacken und wenn es um Performance geht, sollten die integrierten Fähigkeiten des Browsers auf jeden Fall ausgenutzt werden. Wer wissen möchte, welcher Browser neuere Selektoren wie "querySelectorAll" unterstützt, kann dies auf CanIUse.com nachschlagen.
Lee Brimelow hat übrigens auch Benchmarks aufgestellt, in denen der Unterschied von jQuery zu nativen Funktionen deutlich wird.