Plain Vanilla JavaScript !

Neulich hatte ich mal wieder das Vergnügen ohne jQuery o.ä. ein bestehendes Javascript zu erweitern. Entgegen meiner Befürchtung, daß alles dreimal solange dauern würde, bis ich die notwendigen Snippets zusammen gegoogelt und modifiziert habe, ging es doch deutlich schneller als angenommen. Natürlich kann man auch typescript, ES6 usw schreiben und es dann transpilieren, aber es wäre vermutlich noch aufwendiger geworden, diese Frameworks aufzusetzen und damit zu starten. Also plain JS.

Es ist längst nicht mehr wie zur Jahrtausendwende, als es noch notwendig war, selbst einfache DOM-Queries für zwei verschiedene Browser zu schreiben. Sofern man nicht IE7 oder IE6 bedienen muss, was heutzutage wirklich eine sehr abwegige Anforderung wäre, entfallen derartige Browserweichen.

Es handelte sich in diesem Projekt um eine statische Formularanwendung, die mittels neuen Dimension ode Parameters dynamisiert werden sollte, sodaß unterschiedliche Konfigurationen ein und desselben Formulars ermöglicht werden. Ein einziges Dropdown sollte das Aussehen weiterer Multi-Selects steuern, zusätzliche Felder ein- bzw ausblenden etc etc. Alles in allen ein recht fortgeschrittenes Ding und eine sechzehn Jahre alte Javascript Codebasis. Diesesn bestehenden Code wollte ich möglichst unangetastet lassen und möglichst nur neuen Code hinzufügen. Das Formular selbst war eine verschaltelte Tabelle untergebracht, bestehend aus Tabellenzeilen, Unter-Tabellen usw. Das mutet heutzutage wirklich altertümlich an und das ist es auch. Diesen Frontend-Gerüst wollte ich ebenfalls erhalten. Wenn man strukturiert vorgeht und nicht einfach drauflos hackt gelingt es in Javascript häufig “nicht-invasiv” zu arbeiten, also sprichwört etwas um den bestehenden Code herumzustricken, während die vorhandene Funktionalität unangetastet bleibt. Ich habe festgestellt daß meine Art und Weise über DOM-Manipulationen und -Events zu denken schon sehr von jQuery infiltiert ist. Das ist ja auch keine Schande, schliesslich ist jQuery zurecht seit mindestens zehn Jahren weit verbreitet, leicht zu erlernen und sehr flexibel. Die beschriebene Aufgabe, also die Dynamisierung des Formulars habe ich mehr oder weniger gedanklich in jQuery gelöst und dann in Vanilla JS codiert, wohlwissend, daß jQuery natürlich auch nichts anderes ist, als eine Sammlung von Prototypen bestehend aus purem Javascript.

Ich will hier einfach ein paar Beispiele für die Methoden auflisten, die meine Recherche zutage gefördert hat. Dabei soll nicht unerwähnt bleiben, wie mich die Ausführungsgeschwindigkeit von Plain JS positiv überrascht hat. Anfangs waren meine Bedenken noch, daß Teile des Formulars beim Ein- und Ausblenden aufflackern könnten (ein Effekt der tatsächlich auftreten kann, wenn man umfangreiche Strukturen im DOM modifiziert). Aber nichts Dergleichen war zu beobachten, kein Gewackel, kein Geflacker. Schneller als Pure JS gehts im Browser nicht, vorausgesetzt man schreibt effektiven Code, verwendet also z.B. keine mehrfache Variablenzuweisung, keine unnötigen Schleifen usw.

Man findet verschiedene Angaben zum Geschwindigkeitsunterschied, meist liegt der Faktor zwischen 3 und 10, d.h. Plain JS ist 3-10 mal schneller als jQuery.

Hier sind nun eine Handvoll nützlicher Codeschnipsel:

Prüfung ob ein Array-Key existiert

Definiert man ein JS Array in Objektschreibweise


var myarray = {

one : [ 0, 1, 2 ]

two : [ 0, 1, 2 ]

three : [ 0, 1, 2 ]

}

Dann lässt sich auf diese Weise sehr einfach prüfen, ob ein gegebener Key existiert:


if( Object.keys(myarray).indexOf(key) > -1 )

Loop über die Zeilen einer Tabelle


var table = document.getElementById("mytable");

// loop durch alle tabellenzeilen

for (var i = 0, row; row = table.rows[i]; i++) {

if(row.getAttribute('id') !== null) {

row_id = row.getAttribute('id');

// zeile mit id, die "test" enthält ausblenden

if( row_id.indexOf("test") > 0 ) {

...

}

} // if

} // for

Äquivalent zu jQuery next()


var nextElem = next(elem);

function next(elem) {

do {

elem = elem.nextSibling;

} while (elem && elem.nodeType !== 1);

return elem;

}

Diese Funktion findet das nächste Element im DOM. Etwaige Textnodes werden übersprungen.

Alle <input> Elemente unterhalb eines Knotens erhalten

Äquivalent zu jQuery’s find()


var inputfields = node.getElementsByTagName('input');

Es ist nicht möglich mehrere tags per Komma aufzulisten. Stattdessen muss noch einmal getElementsByTagName aufgerufen werden.

Zum Abschluss noch ein paar Links

Hier ist eine coole Seite, auf der man die minimale IE Version einstellen kann, um dann eine ganze Reihe von Gegenüberstellungen jQuery – plain JS zu erhalten. Der IE ist offenbar der kleinste gemeinsame Nenner, nach dem Motto, was dort funktioniert, geht auch in allen anderen Browsern.

http://youmightnotneedjquery.com/

Benchmark Tests

https://medium.com/@trombino.marco/you-might-not-need-jquery-a-2018-performance-case-study-aa6531d0b0c3

https://www.measurethat.net/Benchmarks/Show/554/8/jquery-vs-vanilla-js-getid-speed-test

Hier ist eine weitere Gegenüberstellung neuer Methoden jQuery – plain JS

https://css-tricks.com/now-ever-might-not-need-jquery/

Wer das Pech hat, den Internet Explorer berücksichtigen zu müssen, wird an dieser Stelle enttäuscht, denn so praktische neue Methoden wie closest (inspiriert durch jQuery ?) können dann nicht verwendet werden.