Vergiss jQuery, MooTools oder Dojo – Vanilla JS ist eine gute Alternative!

| | Allgemein, Browser, Programmierung, Web

Wer jetzt denkt: „Das muss ich ausprobieren!“ sollte wissen das er es mit sehr hoher Wahrscheinlichkeit schon getan hat.

Zunächst möchte ich gerne auf die Performance eingehen und einige Beispiele von http://vanilla-js.com/ zeigen.

Das Auswählen eines Elementes

Framework Syntax

ops/sec

Vanilla JS document.getElementById(„test-table“);

12,137,211

Dojo dojo.byId(„test-table“);

5,443,343

Prototype JS $(„test-table“)

2,940,734

Ext JS delete Ext.elCache[„test-table“]; Ext.get(„test-table“);

997,562

jQuery $jq(„#test-table“);

350,557

YUI YAHOO.util.Dom.get(„test-table“);

326,534

MooTools document.id(„test-table“);
78,802

Im vergleich zu jQuery ist es schon sehr beeindruckend. Wer jetzt denkt „Das kenn ich doch – einfach nur JavaScript“ ist der Sache schon sehr nah!

Ein Element ausblenden

Vanilla JS

var s = document.getElementById('thing').style;
s.opacity = 1;
(function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})();

 

jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$('#thing').fadeOut();
</script>

Zugegeben ist natürlich der Quellcode mit jQuery verständlicher und kürzer, allerdings kann man sich auch seine eigene Fade Funktion schreiben.

Wie verwendet man Vanilla JS

Um Vanilla JS zu benutzten reicht es einfach die folgende Zeile Code in deine HTML Datei einzufügen.

<script src="path/to/vanilla.js"></script>

Wenn du fertig bist und dein Projekt in ein aktives System laden möchtest, gibt es eine noch schneller Methode für Vanilla JS.


Genau! Kein Code wird gebraucht. Vanilla JS ist so berühmt das alle Browser es automatisch mit einbinden.

Fazit

Wer jetzt noch nicht begriffen hat dass es sich hier um natives Javascript handelt, dem möchte ich es nicht vorenthalten.

Vanilla JS ist nichts weiter als natives JavaScript.

Die Kampagne soll zeigen dass es nicht immer nötig ist auf eine der zahlreichen JavaScript-Frameworks zurück zu greifen, welche inzwischen sehr inflationär eingesetzt werden.

Neueste Beiträge

Heimnetzwerk – was brauche ich?

Ein Freund steht vor einer aufregenden Phase seines Lebens – die Renovierung seines geliebten Zuhauses. Mit neuen Plänen, frischen Ideen und einem Hauch von Vorfreude hat er beschlossen, sein Heim für die Zukunft zu gestalten. Unter all den Überlegungen zu Farben, Möbeln und Designs, die ihm im Kopf herumschwirren, gibt es jedoch eine unerlässliche Grundlage, die den Kern seiner neuen Lebensweise zu Hause darstellen wird: Ein zuverlässiges und zukunftssicheres Netzwerk.


Weiter >>

Ein Leitfaden für Senioren: Xiaomi-Handys für Benutzer über 80 Jahre

Mit über 80 Jahren beschlossen mein Opa, sich der digitalen Welt anzuschließen. Meine Oma nutzt bereits ein Xiaomi-Handy und schätzt dessen Einfachheit. Nun möchte mein Opa auch ein Mobiltelefon, das eine gute Kamera hat und einfach zu bedienen ist, aber dennoch WhatsApp und andere Funktionen unterstützt – und besonders wichtig: Kein Senioren Handy


Weiter >>