codestory

Was sind Polyfills in der Programmierwissenschaft?

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

1- Polyfill

Laienhaft kann man sich eine polyfill als eine übliche Klebe vorstellen, mit der man Löcher und Risse füllen kann, um eventuelle Fehlstellen in einer Wand auszugleichen. In Großbritannien gibt es einen beliebten Markennamen für diese Klebe namens "Polyfilla".
Für das Web hat der Begriff "Polyfill" eine ähnliche Bedeutung. Ein Polyfill ist ein kleines Stück Code oder eine fehlende Browserfunktion, die hinzugefügt oder ausgefüllt werden muss.
Zum leichteren Verständnis sehen Sie sich unten ein kleines JavaScript ES6-Code-Snippet an:

// ES6 Code
var s = 'Tom and Jerry';

if (s.startsWith('Tom')) {
    console.log('Hello Tom');
}
Die Methode "startsWith" ist Teil der ES6-Spezifikation, die 2015 veröffentlicht wurde. Der obige Code funktioniert perfekt auf neuen Browsern wie Chrome 41+. Hinweis: Die Version Chrome 41 unterstützt ES6-Funktionen nur teilweise. Erst als die Version Chrome 51 (Mai 2016) veröffentlicht wurde, wurde ES6 vollständig von Chrome unterstützt.

Browser Version Supports startsWith Version Fully Support ES6 Date
Chrome 41 51 May 2016
Edge 12 14 Aug 2016
Firefox 17 54 Jun 2017
Internet Explorer No No  
Safari 9 10 Sep 2016
Opera 28 38 Jun 2016
Um alte Browser zu unterstützen, müssen Sie fehlende Funktionen patchen. Überprüfen Sie in diesem Fall, ob der Browser die Methode startsWith unterstützt. Wenn dies nicht der Fall ist, müssen Sie es mit einer entsprechenden Funktion simulieren:

// ES5 Code
if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.substr(position, searchString.length) === searchString;
    };
}
var s = 'Tom and Jerry';

if (s.startsWith('Tom')) {
    console.log('Hello Tom');
}
Ein weiteres Beispiel für eine polyfilll. Die statische Methode Math.trunc(number)) wird verwendet, um den Dezimalteil einer Zahl zu "kürzen" und eine Ganzzahl zurückzugeben. Beispielsweise gibt Math.trunc(1.23) 1 zurück. Alte Browser unterstützen die Methode nicht, daher müssen wir diese Methode simulieren, um sie hinzuzufügen.

if (!Math.trunc) { // if no such method
    // implement it
    Math.trunc = function (number) {
        // Math.ceil and Math.floor exist even in ancient JavaScript engines
        // they are covered later in the tutorial
        return number < 0 ? Math.ceil(number) : Math.floor(number);
    };
}
Bis zur Veröffentlichung dieses Artikels (2021) können wir grundsätzlich davon ausgehen, dass die meisten Nutzer auf einen Browser umgestiegen sind, der JavaScript ES5+ unterstützt. Das Erstellen von polyfill für "zu alte" Browser (ES4-) ist also nicht mehr wirklich notwendig.

caniuse.com ist eine Website, mit der Sie testen können, welche Browser eine bestimmte Funktion unterstützen. Überprüfen Sie beispielsweise die Browserunterstützung für die Methode "startsWith".

2- Verwendungsmöglichkeiten von Polyfill(s)

Grundsätzlich gibt es 2 Möglichkeiten, Polyfill zu verwenden:
Polyfilling manually
Grundsätzlich gibt es 2 Möglichkeiten, Polyfill zu verwenden:
Polyfill library
Viele Polyfill-Bibliotheken werden von der Community erstellt und frei geteilt. Sie werden oft in Verbindung mit Transpiler(s) verwendet.
Zum Beispiel können JavaScript Polyfill-Bibliotheken wie babel-polyfill, Es6-shim, polyfill-library, ... in Ihre Projekte importiert werden, wie NodeJS, React,...
Einige Beispiele für die Verwendung der Polyfill-Bibliotheken, die Sie interessieren könnten:

View more Tutorials: