Läsa in polyfills villkorligt i JavaScript

Den här handledningen visar hur du med villkor kan läsa in polyfills i JavaScript, polyfills bör bara läsas in om de behövs. En polyfill som laddas in när den inte behövs kan göra att din kod fungerar mindre bra eller att den inte fungerar alls.

Polyfill.io är en fantastisk onlinetjänst som gör att du villkorligt kan läsa in polyfills och ladda ner de polyfills som du behöver. Det är dock riskabelt att anropa en onlinetjänst för polyfills eftersom tjänsten kan vara otillgänglig, tillfälligt eller permanent.

Hitta och samla in polyfills

Du måste först veta vilka polyfills du behöver, det beror på din kod och de webbläsare du vill stödja. Du kan ta reda på vilka polyfills du behöver genom att testa din kod i en äldre målwebbläsare. Vi behöver polyfills för: Element.prototype.closest, Array.from, Array.prototype.includes, windows.CustomEvent, windows.Promise, windows.XMLHttpRequest, Element.prototype.remove, String.prototype.endsWith, String.prototype.include och datalist.

Du kan söka på Internet efter dessa polyfills. Sätt flags till always och gated om du laddar ner från polyfill.io, detta ger dig en fullständig polyfill med funktionsdetektering.

https://polyfill.io/v3/polyfill.min.js?flags=gated%2Calways&features=CustomEvent

JavaScript

Jag har sparat varje polyfill som jag hittade i en separat fil och sparar dem i en mapp. Nedan visas koden för att ladda skriptfiler om de behövs, det är viktigt att filerna laddas synkront. Filen med den här koden måste laddas före andra skript som är beroende av dessa skript.

(function () {

    'use_strict';

    if (!Element.prototype.closest) {
        loadScript('/js/polyfills/element.prototype.closest.min.js');
    }
    if (!Array.from) {
        loadScript('/js/polyfills/array.from.min.js');
    }
    if (!Array.prototype.includes) {
        loadScript('/js/polyfills/array.prototype.includes.min.js');
    }
    if (typeof window.CustomEvent !== 'function') {
        loadScript('/js/polyfills/customevent.min.js');
    }
    if (!window.Promise) {
        loadScript('/js/polyfills/promise.min.js');
    }
    if (!window.XMLHttpRequest) {
        loadScript('/js/polyfills/xmlhttprequest.min.js');
    }
    if (!Element.prototype.remove) {
        loadScript('/js/polyfills/element.prototype.remove.min.js');
    }
    if (!String.prototype.endsWith) {
        loadScript('/js/polyfills/string.prototype.endswith.min.js');
    }
    if (!String.prototype.includes) {
        loadScript('/js/polyfills/string.prototype.includes.min.js');
    }
    if ('options' in document.createElement('datalist') === false) {
        loadScript('/js/polyfills/html5.datalist.min.js');
    }

    // Load a script file synchronous
    function loadScript(src) {
        var js = document.createElement('script');
        js.src = src;
        js.async = false;
        document.body.appendChild(js);

    } // End of the loadScript method

})();