Polyfills on koo­di­kom­po­nen­did, mis muudavad uuemad vee­bi­funkt­sioo­nid ka­su­ta­ta­vaks brau­se­ri­tes, mis neid funkt­sioone algselt ei toeta. Käes­ole­vas artiklis sel­gi­ta­takse, mis need prak­ti­li­sed koo­di­kom­po­nen­did on ja kuidas neid kasutada.

Mis on poly­fil­lid ja millistes keeltes neid saab kirjutada?

Polyfill, mida mõnikord ni­me­ta­takse ka Poly­fil­le­riks, on erineva kee­ru­ku­sega koo­dib­lokk, mis muudab kaas­aeg­sed HTML-, CSS- või Ja­vaSc­ript-funkt­sioo­nid kät­te­saa­da­vaks vanemates brau­se­ri­tes, mis neid algselt ei toeta. Enamik polyfille on kir­ju­ta­tud Ja­vaSc­rip­tis, kuid ka teised vee­bi­prog­ram­mee­ri­mis­kee­led võivad olla täi­tesk­rip­tide aluseks. Mõned olu­li­se­mad funkt­sioo­nid, mida poly­fil­lid eri­ne­va­tes vee­bib­rau­se­ri­tes kät­te­saa­da­vaks teevad, on HTML5 kom­po­nen­did, nagu bitmap-põhised canvas-elemendid graafika, diag­rammide ja ani­mat­sioo­nide jaoks.

Note

Termin „polyfill” on tuletatud po­pu­laarse Briti brändi Polyfilla nimest, mis on re­no­vee­ri­mis- ja res­tau­ree­ri­mis­töö­deks mõeldud täiteaine. Vee­biaren­daja Remy Sharp nägi sobivat võrdlust täiteaine ja nende kasulike töö­mee­to­dite vahel, kuna mõlema eesmärk on täita lüngad. Viimase puhul on täi­de­ta­vad lüngad brauseri funkt­sio­naal­suses. Mõiste võeti ka­su­tusele Sharpi 2009. aasta raamatus „Int­ro­ducing HTML5”, mille ta kirjutas koos Bruce Lawsoniga. Polyfill kehtestus seejärel selliste koo­di­kom­po­nen­tide amet­likuks ni­me­tu­seks.

Milliseid polyfille on olemas?

Asjaolu, et termin „polyfill” on tihedalt seotud HTML5-ga, ei ole juhuslik. Tänu oma täius­ta­tud funkt­sioo­ni­dele, mis on muu hulgas muutnud flash-videod tarbetuks, on hü­per­teksti mär­gis­tus­keele viies versioon saanud veebi püsivaks osaks. Siiski on HTML5 toetus brau­se­ri­tes arenenud üsna aeglaselt. Lisaks HTML5 ele­men­ti­dele loodud poly­fil­li­dele ka­su­ta­takse polyfill-koo­dib­lokke ka järgmiste veebi­ele­men­tide in­teg­ree­ri­miseks:

  • SVG-graafika: SVG-vorming SVG (Scalable Vector Graphics), mida W3C kon­sort­sium hakkas 2001. aastal soovitama vek­tor­graa­fika stan­dard­vor­min­guna, sai es­ma­kord­selt po­pu­laar­suse HTML5-ga. Kuna paljud brauserid ei toeta veel seda vormingut, on olemas SVG-po­lü­fil­lid, nagu svgweb.
  • EC­MASc­ript: EC­MASc­ript on Ja­vaSc­ripti stan­dar­di­see­ri­tud tuum ja seda uuen­da­takse re­gu­laar­selt, et laiendada keele funkt­sio­naal­sust. Sellised funkt­sioo­nid nagu Promise-objektid või Symbol-funkt­sioo­nid on vanemates brau­se­ri­tes kät­te­saa­da­vad po­lü­fil­lide kaudu, nagu Ja­vaSc­ripti stan­dard­teek core-js.
  • Veebimälu: küpsiste al­ter­na­tiivid, nagu kohalik mälu (pi­ka­aja­line mälu kliendi poolel) ja sessiooni mälu (mälu, mis on piiratud praeguse ses­sioo­niga), mida ühiselt ni­me­ta­takse vee­bi­mä­luks või DOM-mäluks, ei ole kõikides brauseri ver­sioo­ni­des toetatud. MIT-lit­sent­siga webs­to­rage-polyfill on tuntud lahendus sellele prob­lee­mile.
  • Cross-Origin Resource Sharing (CORS): CORS võimaldab vee­bi­ra­ken­dus­tel pääseda ligi vee­bi­res­surs­si­dele, mis asuvad väl­jas­pool oma serverit. Paljud vanemad brauserid ei toeta seda and­me­va­he­tust. Ja­vaSc­ripti pakett XDomain ja CORS polyfill XHook võivad aidata seda probleemi lahendada.
  • CSS (Cascading Style Sheets): aastaid on CSS olnud üks olu­li­se­maid vahendeid vee­bi­sai­tide visuaalse kujunduse loomiseks. Aja jooksul on stii­li­le­hed muutunud mit­me­külg­se­maks, mistõttu on poly­fil­lid muutunud po­pu­laar­seks vanemate brau­se­ri­tega suht­le­misel. Üks tuntumaid vahendeid on css-polyfills.js.
  • Geo­lo­kat­sioon: pikka aega ei toetanud brauserid geo­lo­kat­siooni API-d (mida ka­su­ta­takse kasutaja asukoha edas­ta­miseks) ja seda sai kasutada ainult täiendava brauseri pis­tik­prog­rammi abil. Polyfilli abil saate pakkuda seda funkt­siooni ka­su­ta­ja­tele, kellel on vanemad brauseri ver­sioo­nid, mis ei toeta API-d.

Kuidas ka­su­ta­takse polyfille? (Koo­di­näi­ted lisatud)

Võite polyfill Ja­vaSc­ripti koodi või polyfill skripte otse vee­bi­saidi HTML-dokumenti lisada. Need in­teg­ree­ru­vad sujuvalt ole­mas­ole­vasse läh­te­koodi ja käi­vi­tu­vad ainult juhul, kui brauser ei toeta konk­reet­set vee­bi­funkt­siooni. Selleks ka­su­ta­takse ta­va­li­selt Ja­vaSc­ripti if, et kont­rol­lida puuduvat tuge. Toetuse puudumine võib seejärel muutuda skripti ak­ti­vee­ri­mise tin­gi­mu­seks. Järgmises kahes näites il­lust­ree­rime, kuidas seda rakendada, ja näitame, milline on polyfilli üldine struktuur.

Näide 1: Polyfill Ja­vaSc­ripti meetodile startsWith()

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

See väike Ja­vaSc­ripti koodijupp võimaldab kutsuvale brauseril kasutada startsWith() meetodit, isegi kui see seda algselt ei toeta. See meetod, mis on osa EC­MASc­ript 6 spet­si­fi­kat­sioo­nist, kont­rol­lib, kas string algab teise stringi tähe või tä­he­mär­kide jadaga. Kui see nii on, siis tagastab see väärtuse „true”, muidu tagastab väärtuse „false”. Arendaja Mathias Bynensi GitHubi lehelt leiate kee­ru­li­sema ja op­ti­mee­ri­tud versiooni startsWith() in­teg­ree­ri­miseks.

Note

Siin esitatud kood ei tööta, kui vee­bik­lien­dil on Ja­vaSc­ript blo­kee­ri­tud või skrip­ti­keel selle seadetes keelatud.

Näide 2: Veebimälu polyfill

See Ja­vaSc­ripti polyfill on lihtne ko­dee­ri­mis­la­hen­dus, mis muudab kohaliku ja sessiooni sal­ves­ta­mise kät­te­saa­da­vaks vanemates brauseri mudelites.

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');
    })();
}
ja­vasc­ript

Eespool esitatud kood on kohe käi­vi­ta­tav funkt­sioo­ni­väl­jend(IIFE). Enne kui brauser selle laadib, kont­rol­lib koodi esimeses reas olev käsk if, kas klient toetab veebimälu teh­no­loo­giaid. Kui toetab, siis väärtus if tagastab vale väärtuse, kuna kohaliku ja sean­si­mälu tüübid on juba mää­rat­le­tud. Selle tu­le­mu­sena jäetakse polyfill kõrvale.

Go to Main Menu