dynamically polyfill features for a script

Dynamisch Polyfill -Funktionen für ein Skript

Ein kleines Skript, mit dem Sie eine Funktion nur bei Bedarf polyieren können - keine verschwendeten Anfragen an Browsern mit nativem Support! ?

Dieses Skript ist ~ 4,2 KB UN Minified (121 Zeilen) (1,04 KB UN , minified und gziped) , ~ 8,37 kB UN , die mit Inline -Kommentaren (121 Zeilen) (2,12 KB UN Minified und Gziped) abgebaut sind, oder ~ 1,9 KB Minified (1 Zeile) (743B Minified und Gziped) oder ~ 1,9 KB (1 Zeile) (743B Mined und Gziped) , so dass es ziemlich leicht ist. ?

Erste Schritte

Bereitstellungen finden Sie in Notes zum Bereitstellen des Projekts in einem Live -System.

Voraussetzungen

Stellen Sie sicher, dass Sie wissen, auf welche Funktionen Ihr Skript angewiesen ist, und diejenigen, die die von Ihnen unterstützten Browser nicht nativ unterstützt (Sie können https://caniuse.com/ überprüfen).

Einsatz

Laden über NPM

1. Führen Sie npm i dynamic-polyfiller aus
2. Importieren Sie in Ihrer App (Beispiel unten für React):

 import React from 'react' ;  
import { render } from 'react-dom' ;  

//The import below is the bit you need!
import dynamicPolyfill from 'dynamic-polyfiller' ;

dynamicPolyfill (
  [ "IntersectionObserver" , "Object.assign" ] ,
  'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js' ,
  'quicklink();'
) ;

Laden lokal (empfohlen wie am einfachsten):

1. Kopieren Sie den Inhalt von DynamicPolyFill.js
2. Fügen Sie es in Ihre vorhandenen JS -Dateien ein
3. Fügen Sie danach eine neue Zeile hinzu und rufen Sie dynamicPolyfill(); Hinweis: Fallempfindlich
   1. Beispiel:

    dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' )
   

4. Fügen Sie dem Tag ein onLoad dynamicPolyfill() hinzu
   1. HINWEIS: Der erste Parameter sind die Funktionen, die Sie übergeben möchten. Dies wird als Array erwartet.
   2. Hinweis: Die zweite Parameter ist die URL des Skripts, das Sie verwenden möchten. Dies wird entweder als string oder als array erwartet, kann aber leer ( '' ) oder null sein, wenn Sie kein Drittanbieter -Skript laden.
   3. Hinweis: Der dritte Parameter ist die Funktion, die Sie ausführen würden, sobald das Skript geladen wurde. Dies wird als string oder array erwartet.
   4. Hinweis: Der 4. Parameter wurde jetzt veraltet.

Laden von CDN (weniger empfohlen):

1. Fügen Sie ein <script></script> Tag hinzu, das mit diesem Skript verlinkt wird
   1. Beispiel:

    <script src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js'>
   </script>
   

2. Fügen Sie dem Tag ein onLoad dynamicPolyfill() hinzu
   1. HINWEIS: Der erste Parameter sind die Funktionen, die Sie übergeben möchten. Dies wird als Array erwartet.
   2. Hinweis: Die zweite Parameter ist die URL des Skripts, das Sie verwenden möchten. Dies wird entweder als string oder als array erwartet, kann aber leer ( '' ) oder null sein, wenn Sie kein Drittanbieter -Skript laden.
   3. Hinweis: Der dritte Parameter ist die Funktion, die Sie ausführen würden, sobald das Skript geladen wurde. Dies wird als string oder array erwartet.
   4. Hinweis: Der 4. Parameter wurde jetzt veraltet.

Hinweis: Das Laden von einem CDN würde immer noch zu einer potenziell verschwendeten Anfrage führen?

Beispiel Methode der Nutzung

Lokal

Stringvariablen

 dynamicPolyfill( 'IntersectionObserver', 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();' );

Array -Variablen

 dynamicPolyfill( ["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'] );

CDN

Hinweis: Sie müssen sicherstellen, dass das tatsächliche Skript selbst die Funktion dynamicPolyfill() aufruft. Wenn Sie das Skript selbst hosten (anstatt zu einem CDN aufzurufen), stellen Sie sicher, dass Sie zuerst den Skriptcode eingeben, und rufen Sie die Funktion an. Sie können dies auf die gleiche Weise wie oben tun, aber die CDN -URL durch den Pfad zu Ihrer eigenen JS -Datei ersetzen, wenn Sie sie nicht aus derselben Datei aufrufen.

Stringvariablen:

 <script
	src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js' 
	onload='dynamicPolyfill( ["IntersectionObserver", "Object.assign"], 'https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'quicklink();')'>
</script>

Array -Variablen:

 <script
	src='https://cdn.jsdelivr.net/gh/willstocks-tech/dynamically-polyfill-features-for-a-script@master/dynamicpolyfill.min.js' 
	onload='dynamicPolyfill(["IntersectionObserver", "Object.assign"], ['https://cdn.jsdelivr.net/npm/[email protected]/dist/quicklink.umd.js', 'https://other.cdn.net/script.js'], ['quicklink();', 'otherFunction();'])'>
</script>

Gebaut mit

• Vanilla JavaScript - Keine Framework -Abhängigkeiten!
• Polyfill.io - für die tatsächlichen Polyfills!

Versioning

Für die verfügbaren Versionen finden Sie im Repo -Veröffentlichungshistorium. Ich würde empfehlen, sich an die "neueste Veröffentlichung" zu halten!

Autoren

• Will Aktien - erste Arbeit - Willstocks -Tech

Siehe auch die Liste der Mitwirkenden, die an diesem kleinen Nugget teilgenommen haben!

Beitragen

Bitte lesen Sie den Beitrag zum Verhaltenskodex und den Vorgang zum Senden von Pull -Anfragen.

Lizenz

Dieses Projekt ist unter der MIT -Lizenz lizenziert - finden Sie in der lizenz.md -Datei für Details

Anerkennung

• Purplebooth für diese fantastische Readme -Vorlage!
• Polyfill.io für den fantastischen Polyfill -Service!