Was bedeuten Polyfills in HTML5?

387

Was bedeuten Polyfills in HTML5? Ich habe dieses Wort auf vielen Websites über HTML5 gesehen, z. B. HTML5-Cross-Browser-Polyfills.

Hier sammeln wir also alle Shims, Fallbacks und Polyfills, um HTML5-Funktionen in Browser zu implantieren, die sie nicht nativ unterstützen.

Ich habe eigentlich nicht verstanden, was Polyfills bedeuten.

Ist es eine neue HTML5-Technik oder eine JavaScript-Bibliothek? Ich habe dieses Wort noch nie vor HTML5 gehört.

Und was ist der Unterschied zwischen Unterlegscheiben, Fallbacks und Polyfills?

Jitendra Vyas
quelle
1
Sie können überprüfen, um besser zu verstehen blogs.msdn.com/b/jennifer/archive/2011/08/04/…
@ user3400622 Danke für den Link, die Erklärung im Link ist sehr klar.
Andrew Lam

Antworten:

377

Eine Polyfüllung ist ein in JavaScript erstellter Browser-Fallback, der es ermöglicht, dass Funktionen, die Sie in modernen Browsern erwarten, in älteren Browsern funktionieren, z. B. Canvas (eine HTML5-Funktion) in älteren Browsern.

Es ist eine Art HTML5-Technik, da sie in Verbindung mit HTML5 verwendet wird, aber nicht Teil von HTML5 ist, und Sie können Polyfills ohne HTML5 verwenden (zum Beispiel, um die gewünschten CSS3-Techniken zu unterstützen).

Hier ist ein guter Beitrag:

http://remysharp.com/2010/10/08/what-is-a-polyfill/

Hier ist eine umfassende Liste von Polyfills und Shims:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Calvin Froedge
quelle
6
Es ist also gemein, dass ie7.js auch eine Polyfüllung ist
Jitendra Vyas
1
Ja: "Viele Korrekturen, einschließlich PNG-Transparenz, CSS-Stile / Selektoren, Rendern von Fehlerkorrekturen usw." Es fügt diese Funktionalität über Javascript hinzu, die der Browser noch nicht unterstützt.
Calvin Froedge
1
Ich denke, das Wort Polyfills ist nach HTML5 aufgetaucht. Ist Shim anders als Polyfills?
Jitendra Vyas
16
Eine Unterlegscheibe ist allgemeiner. Eine Polyfüllung ist eine Art Unterlegscheibe. Hier ist eine Frage, die es gut erklärt: stackoverflow.com/questions/6599815/…
Calvin Froedge
6
remysharp.com/2010/10/08/what-is-a-polyfill Dieser Link ist mehr als nur ein "guter Beitrag". Es ist eigentlich die vollständige Definition und Herkunft des Wortes durch die Person, die das Wort geprägt hat. Auszug: "Das Produkt Polyfilla (Spackling in den USA) ist eine Paste, die an Wänden angebracht werden kann, um Risse und Löcher abzudecken." Der Beitrag behandelt auch das Konzept, dass Shim älter ist als Polyfill. Es ist ein Muss zu lesen, IMO.
Aaron-Codierung
64

Lassen Sie uns zunächst klären, was eine Polydatei nicht ist: Eine Polyfüllung ist nicht Teil des HTML5-Standards. Eine Polyfüllung ist auch nicht auf Javascript beschränkt, obwohl in diesen Kontexten häufig auf Polyfüllungen verwiesen wird.

Der Begriff Polyfill selbst bezieht sich auf einen Code, der "es Ihnen ermöglicht, bestimmte Funktionen, die Sie von aktuellen oder" modernen "Browsern erwarten, auch in anderen Browsern zu verwenden, in denen diese Funktionen nicht unterstützt werden."

Quelle und Beispiel der Polyfüllung hier:

http://www.programmerinterview.com/index.php/html5/html5-polyfill/

Jarvis
quelle
31

Eine Polyfüllung ist ein Code (oder Plugin), der die Technologie bereitstellt, die Sie als Entwickler vom Browser nativ erwarten.

Ranjeet Mähne
quelle
2
Gut erklärt.
Eugen Sunic
16

Ein polyfill ist eine Beilage , die ersetzt den ursprünglichen Anruf mit dem Aufruf zu einer Shim.

Angenommen, Sie möchten das Objekt navigator.mediaDevices verwenden, dies wird jedoch nicht von allen Browsern unterstützt. Sie können sich eine Bibliothek vorstellen, die einen Shim bereitstellt, den Sie wie folgt verwenden können:

<script src="js/MediaShim.js"></script>
<script>
    MediaShim.mediaDevices.getUserMedia(...);
</script>

In diesem Fall rufen Sie explizit einen Shim auf, anstatt das ursprüngliche Objekt oder die ursprüngliche Methode zu verwenden. Die Polyfüllung hingegen ersetzt die Objekte und Methoden der Originalobjekte.

Zum Beispiel:

<script src="js/adapter.js"></script>
<script>
    navigator.mediaDevices.getUserMedia(...);
</script>

In Ihrem Code sieht es so aus, als würden Sie das Standardobjekt navigator.mediaDevices verwenden. Aber wirklich, die Polyfüllung (im Beispiel adapter.js) hat dieses Objekt durch ein eigenes ersetzt.

Der, durch den es ersetzt wurde, ist eine Unterlegscheibe. Dadurch wird erkannt, ob die Funktion nativ unterstützt wird, und sie wird verwendet, wenn dies der Fall ist, oder es wird mithilfe anderer APIs umgangen, wenn dies nicht der Fall ist.

Eine Polyfüllung ist also eine Art "transparente" Unterlegscheibe. Und genau das meinte Remy Sharp (der den Begriff geprägt hat), als er sagte: " Wenn Sie das Polyfill-Skript entfernen, funktioniert Ihr Code weiterhin, ohne dass Änderungen erforderlich sind, obwohl die Polyfill entfernt wurde. "

Richard Shepherd
quelle
9
Was ist eine Unterlegscheibe?
Oliver Watkins
3
@Oliver Watkins Wenn Sie mit dem Adaptermuster vertraut sind, wissen Sie, was eine Unterlegscheibe ist. Shims fängt API-Aufrufe ab und erstellt eine abstrakte Ebene zwischen dem Aufrufer und dem Ziel. Normalerweise werden Ausgleichsscheiben aus Gründen der Abwärtskompatibilität verwendet
Anurag Ratna
@AnuragRatna Ich würde 'Intercept' nicht verwenden, um Verwirrung zu vermeiden. Intercept bezieht sich normalerweise auf Code, der (transparent) abfängt, dh ohne dass der Anrufer es weiß. Shims bieten API-Aufrufe für Abwärtskompatibilität
Qetesh