codestory

Was sind Polyfills in der Programmierwissenschaft?

  1. Polyfill
  2. Verwendungsmöglichkeiten von Polyfill(s)

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:
  • NodeJS + babel-polyfill
Anleitungen ECMAScript, Javascript

                Show More
            
Anleitungen ECMAScript, Javascript

                Show More
            
Neueste Artikel

            Show More