Kas yra polyfills?

Polyfills yra kodų kom­po­nen­tai, kurie leidžia naudoti naujesnes ži­nia­tink­lio funkcijas nar­šyk­lė­se, kurios iš pri­gim­ties nepalaiko tokių funkcijų. Šiame straips­ny­je pa­aiš­ki­na­ma, kas yra šie prak­ti­niai kodų kom­po­nen­tai ir kaip juos galima naudoti.

Kas yra polyfills ir kokiomis kalbomis jie gali būti rašomi?

Polyfill, kartais vadinamas Po­ly­fil­ler, yra įvairaus su­dė­tin­gu­mo kodų blokas, kuris leidžia naudoti šiuo­lai­ki­nes HTML, CSS ar Ja­vaSc­ript funkcijas senesnėse nar­šyk­lė­se, kurios iš pri­gim­ties jų nepalaiko. Dauguma polyfill yra parašyti Ja­vaSc­ript kalba, tačiau kitos ži­nia­tink­lio prog­ra­ma­vi­mo kalbos taip pat gali būti nau­do­ja­mos kaip užpildymo skriptų pagrindas. Kai kurios iš svar­biau­sių funkcijų, kurias polyfill leidžia naudoti skir­tin­go­se ži­nia­tink­lio nar­šyk­lė­se, yra HTML5 kom­po­nen­tai, pvz., bitmap pagrįsti canvas elementai grafikai, dia­gra­moms ir ani­ma­ci­joms.

Kokios yra polyfill rūšys?

Tai, kad terminas „polyfill“ yra glaudžiai susijęs su HTML5, nėra at­si­tik­ti­nu­mas. Dėl savo pažangių funkcijų, kurios, be kita ko, padarė flash vaizdo įrašus at­gy­ve­nu­siais, penktoji hi­per­teks­to žymėjimo kalbos versija tapo nuolatine interneto funkcija. Tačiau HTML5 pa­lai­ky­mas nar­šyk­lė­se vystėsi gana lėtai. Be polyfill, sukurtų HTML5 ele­men­tams, polyfill kodų blokai taip pat naudojami in­te­gruo­ti šiuos interneto elementus:

• SVG grafika: SVG formatas SVG (Scalable Vector Graphics), kurį W3C kon­sor­ciu­mas 2001 m. pradėjo re­ko­men­duo­ti kaip stan­dar­ti­nį vek­to­ri­nės grafikos formatą, pirmą kartą sulaukė po­pu­lia­ru­mo su HTML5. Tačiau kadangi daugelis naršyklių dar nepalaiko šio formato, yra SVG polyfills, pvz., svgweb.
• EC­MASc­ript: EC­MASc­ript yra stan­dar­ti­zuo­tas Ja­vaSc­ript bran­duo­lys, kuris re­gu­lia­riai at­nau­ji­na­mas, siekiant išplėsti kalbos funk­cio­na­lu­mą. Tokios funkcijos kaip Promise objektai ar Symbol funkcijos yra pri­ei­na­mos senesnėse nar­šyk­lė­se per polyfills, pvz., Ja­vaSc­ript stan­dar­ti­nę bi­b­lio­te­ką core-js.
• Interneto saugykla: slapukų al­ter­na­ty­vos, pvz., vietinė saugykla (ilgalaikė saugykla kliento pusėje) ir sesijos saugykla (saugykla, ribota iki da­bar­ti­nės sesijos), kartu vadinamos interneto saugykla arba DOM saugykla, nėra pa­lai­ko­mos visose naršyklių versijose. MIT li­cen­ci­juo­tas webs­to­ra­ge-polyfill yra gerai žinomas šios problemos spren­di­mas.
• Cross-Origin Resource Sharing (CORS): CORS leidžia in­ter­ne­ti­nėms prog­ra­moms pasiekti in­ter­ne­ti­nius išteklius, esančius už savo serverio ribų. Daugelis senesnių naršyklių nepalaiko šio duomenų mainų. Ja­vaSc­ript paketas XDomain ir CORS polyfill XHook gali padėti išspręsti šią problemą.
• CSS (Cascading Style Sheets): jau daugelį metų CSS yra vienas iš svar­biau­sių įrankių, skirtų svetainių vi­zu­a­li­niam iš­dės­ty­mui kurti. Laikui bėgant stilių lapai tapo uni­ver­sa­les­ni, todėl polyfill tapo po­pu­lia­rūs sąsajai su se­nes­nė­mis nar­šyk­lė­mis. Vienas iš ge­riau­siai žinomų įrankių yra css-polyfills.js.
• Geo­gra­fi­nė vieta: ilgą laiką naršyklės nepalaikė Geo­gra­fi­nės vietos API (nau­do­ja­mos perduoti vartotojo buvimo vietą) ir ją buvo galima naudoti tik su papildomu naršyklės įskiepiu. Naudodami polyfill, galite suteikti šią funkciją var­to­to­jams, tu­rin­tiems senesnes naršyklės versijas, kurios iš pri­gim­ties nepalaiko API.

Kaip naudojami polyfills? (Pa­tei­kia­mi kodo pa­vyz­džiai)

Jūs galite tie­sio­giai įterpti polyfill Ja­vaSc­ript kodą arba polyfill sce­na­ri­jus į svetainės HTML dokumentą. Jie sklan­džiai in­te­gruo­ja­si į esamą šaltinio kodą ir yra vykdomi tik tuo atveju, jei naršyklė nepalaiko tam tikros interneto funkcijos. Paprastai tai daroma naudojant Ja­vaSc­ript if, kad būtų pa­tik­rin­ta, ar trūksta palaikymo. Palaikymo trūkumas gali būti paverstas sąlyga, kuriai esant ak­ty­vuo­ja­mas skriptas. Šiuose dviejuose pa­vyz­džiuo­se pa­aiš­kin­si­me, kaip tai įgy­ven­din­ti, ir pa­ro­dy­si­me, kaip atrodo bendra polyfill struktūra.

1 pavyzdys: Polyfill Ja­vaSc­ript metodui startsWith()

if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
    };
}

Šis nedidelis Ja­vaSc­ript frag­men­tas leidžia naršyklei naudoti startsWith() metodą, net jei ji jo iš pri­gim­ties nepalaiko. Šis metodas, kuris yra EC­MASc­ript 6 spe­ci­fi­ka­ci­jos dalis, patikrina, ar eilutė prasideda kitos eilutės simboliu ar simbolių seka. Jei taip, jis grąžina „true“, kitaip – „false“. Su­dė­tin­ges­nę, op­ti­mi­zuo­tą versiją, skirtą in­te­gruo­ti startsWith(), galite rasti kūrėjo Mathias Bynens GitHub puslapyje.

2 pavyzdys: in­ter­ne­ti­nės saugyklos polyfill

Šis Ja­vaSc­ript polyfill yra paprastas kodavimo spren­di­mas, kuris leidžia naudoti vietinę ir sesijos saugyklą se­nes­niuo­se naršyklės mo­de­liuo­se.

if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') {
    (function () {
        var data = {};
        var Storage = function (type) {
            function setData() {
                // Implement the logic to set data into storage
                var storageData = JSON.stringify(data);
                document.cookie = type + '=' + storageData + ';path=/';
            }
            function clearData() {
                data = {};
                setData();
            }
            return {
                length: 0,
                clear: function () {
                    clearData();
                    this.length = 0;
                },
                getItem: function (key) {
                    return data[key] === undefined ? null : data[key];
                },
                key: function (i) {
                    var ctr = 0;
                    for (var k in data) {
                        if (ctr == i) return k;
                        ctr++;
                    }
                    return null;
                },
                removeItem: function (key) {
                    delete data[key];
                    this.length--;
                    setData();
                },
                setItem: function (key, value) {
                    data[key] = value + '';
                    this.length++;
                    setData();
                }
            };
        };
        // Set the local and session storage properties inside the window object
        if (typeof window.localStorage === 'undefined') window.localStorage = new Storage('local');
        if (typeof window.sessionStorage === 'undefined') window.sessionStorage = new Storage('session');
    })();
}

Pateiktas kodas yra iškart vykdomas funkcijos išraiška(IIFE). Tačiau prieš naršyklei jį įkeliant, pirmoje kodo eilutėje esanti komanda if patikrina, ar klientas iš pri­gim­ties palaiko ži­nia­tink­lio saugojimo tech­no­lo­gi­jas. Jei palaiko, teiginys if grąžins klaidingą vertę, nes vietinio ir sesijos saugojimo tipai jau yra apibrėžti. Dėl to polyfill yra atmestas.