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.
