Die JavaScript-Sprache entwickelt sich ständig weiter. Regelmäßig erscheinen neue Vorschläge für die Sprache, sie werden analysiert und, wenn sie als würdig erachtet werden, an die Liste unter https://tc39.github.io/ecma262/ angehängt und gehen dann zur Spezifikation über.
Die Teams hinter JavaScript-Engines haben ihre eigenen Vorstellungen davon, was sie zuerst implementieren sollen. Sie entscheiden sich möglicherweise dafür, im Entwurf befindliche Vorschläge umzusetzen und Dinge zu verschieben, die bereits in der Spezifikation enthalten sind, weil sie weniger interessant oder einfach schwieriger umzusetzen sind.
Daher ist es durchaus üblich, dass eine Engine nur einen Teil des Standards implementiert.
Eine gute Seite, um den aktuellen Stand der Unterstützung für Sprachfunktionen zu sehen, ist https://compat-table.github.io/compat-table/es6/ (sie ist groß, wir müssen noch viel lernen).
Als Programmierer möchten wir die neuesten Funktionen nutzen. Je mehr gute Sachen – desto besser!
Wie können wir andererseits dafür sorgen, dass unser moderner Code auf älteren Engines funktioniert, die die neuesten Funktionen noch nicht verstehen?
Dafür gibt es zwei Tools:
Transpiler.
Polyfills.
Unser Ziel in diesem Kapitel ist es, einen Überblick über ihre Funktionsweise und ihren Platz in der Webentwicklung zu erhalten.
Ein Transpiler ist eine spezielle Software, die Quellcode in einen anderen Quellcode übersetzt. Es kann modernen Code analysieren („lesen und verstehen“) und ihn mithilfe älterer Syntaxkonstrukte umschreiben, sodass er auch in veralteten Engines funktioniert.
Beispielsweise hatte JavaScript vor dem Jahr 2020 nicht den „Nullish Coalescing Operator“ ?? . Wenn ein Besucher also einen veralteten Browser verwendet, kann es sein, dass er den Code wie height = height ?? 100 nicht versteht. height = height ?? 100 .
Ein Transpiler würde unseren Code analysieren und height ?? 100 in (height !== undefined && height !== null) ? height : 100 .
// bevor der Transpiler ausgeführt wird Höhe = Höhe ?? 100; // nach dem Ausführen des Transpilers height = (height !== undefiniert && height !== null) ? Höhe: 100;
Jetzt ist der neu geschriebene Code für ältere JavaScript-Engines geeignet.
Normalerweise führt ein Entwickler den Transpiler auf seinem eigenen Computer aus und stellt dann den transpilierten Code auf dem Server bereit.
Apropos Namen: Babel ist einer der bekanntesten Transpiler überhaupt.
Moderne Projekterstellungssysteme wie Webpack bieten die Möglichkeit, bei jeder Codeänderung automatisch einen Transpiler auszuführen, sodass die Integration in den Entwicklungsprozess sehr einfach ist.
Zu den neuen Sprachfunktionen gehören möglicherweise nicht nur Syntaxkonstrukte und Operatoren, sondern auch integrierte Funktionen.
Beispielsweise ist Math.trunc(n) eine Funktion, die den Dezimalteil einer Zahl „abschneidet“, z. B. gibt Math.trunc(1.23) 1 zurück.
In einigen (sehr veralteten) JavaScript-Engines gibt es kein Math.trunc , sodass solcher Code fehlschlägt.
Da es sich um neue Funktionen und nicht um Syntaxänderungen handelt, besteht hier keine Notwendigkeit, etwas zu transpilieren. Wir müssen nur die fehlende Funktion deklarieren.
Ein Skript, das neue Funktionen aktualisiert/hinzufügt, wird „Polyfill“ genannt. Es „füllt“ die Lücke und ergänzt fehlende Implementierungen.
In diesem speziellen Fall ist die Polyfüllung für Math.trunc ein Skript, das sie wie folgt implementiert:
if (!Math.trunc) { // wenn keine solche Funktion vorhanden ist
// umsetzen
Math.trunc = Funktion(Zahl) {
// Math.ceil und Math.floor existieren sogar in alten JavaScript-Engines
// Sie werden später im Tutorial behandelt
Rückgabenummer < 0 ? Math.ceil(number) : Math.floor(number);
};
}JavaScript ist eine hochdynamische Sprache. Skripte können jede Funktion hinzufügen/ändern, auch integrierte.
Zwei interessante Polyfill-Bibliotheken sind:
Core-JS, das viel unterstützt und nur die Einbeziehung benötigter Funktionen ermöglicht.
In diesem Kapitel möchten wir Sie dazu motivieren, sich mit modernen und sogar hochmodernen Sprachfunktionen zu befassen, auch wenn diese von JavaScript-Engines noch nicht gut unterstützt werden.
Vergessen Sie jedoch nicht, einen Transpiler (bei Verwendung moderner Syntax oder Operatoren) und Polyfills (um möglicherweise fehlende Funktionen hinzuzufügen) zu verwenden. Sie sorgen dafür, dass der Code funktioniert.
Wenn Sie beispielsweise später mit JavaScript vertraut sind, können Sie mit dem babel-loader-Plugin ein Code-Build-System auf Basis von Webpack einrichten.
Gute Ressourcen, die den aktuellen Stand der Unterstützung für verschiedene Funktionen zeigen:
https://compat-table.github.io/compat-table/es6/ – für reines JavaScript.
https://caniuse.com/ – für browserbezogene Funktionen.
PS: Google Chrome verfügt normalerweise über die aktuellsten Sprachfunktionen. Probieren Sie es aus, wenn eine Tutorial-Demo fehlschlägt. Die meisten Tutorial-Demos funktionieren jedoch mit jedem modernen Browser.