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

Automatisierung einer Türklingel mit ESPHome, Home Assistant, NodeMCU und einem Sound/Mirkofon Sensor

Willkommen zu meinem neuesten DIY-Hausautomatisierungsprojekt: die Umwandlung einer traditionellen Türklingel in eine smarte Türklingel mit ESPHome und einem ESP8266/NodeMCU[*] zusammen mit einem Geräuchsensor[*]. In diesem Blogbeitrag werde ich die Einrichtung Schritt für Schritt erklären und die Konfiguration teilen, die für mich funktioniert hat, um Ihre Türklingel nicht nur intelligenter, sondern auch mit Home Assistant integriert zu machen.


Weiter >>

Automating Your Doorbell with ESPHome and Home Assistant: A DIY Smart Home Project / Automatisierung einer Türklingel mit ESPHome und Home Assistant

Welcome to my latest DIY home automation project: transforming a traditional doorbell into a smart doorbell using ESPHome and an ESP8266/NodeMCU[*] along with a sound sensor[*]. In this blog post, I’ll walk you through the setup and share the configuration that worked for me, making your doorbell not only smarter but also integrated with Home Assistant.


Weiter >>