# Mis on polyfillid?

**Polyfills** on koodikomponendid, mis muudavad uuemad veebifunktsioonid kasutatavaks brauserites, mis neid funktsioone algselt ei toeta. Käesolevas artiklis selgitatakse, mis need praktilised **koodikomponendid** on ja kuidas neid kasutada.

## Mis on polyfillid ja millistes keeltes neid saab kirjutada?

Polyfill, mida mõnikord nimetatakse ka Polyfilleriks, on erineva keerukusega koodiblokk, mis muudab kaasaegsed HTML-, CSS- või JavaScript-funktsioonid kättesaadavaks vanemates brauserites, mis neid algselt ei toeta. Enamik polyfille on kirjutatud JavaScriptis, kuid ka teised veebiprogrammeerimiskeeled võivad olla täiteskriptide aluseks. Mõned olulisemad funktsioonid, mida polyfillid erinevates veebibrauserites kättesaadavaks teevad, on HTML5 komponendid, nagu bitmap-põhised canvas-elemendid graafika, diagrammide ja animatsioonide jaoks.

Note Termin „polyfill” on tuletatud populaarse Briti brändi Polyfilla nimest, mis on renoveerimis- ja restaureerimistöödeks mõeldud täiteaine. Veebiarendaja Remy Sharp nägi sobivat võrdlust **täiteaine** ja nende kasulike **töömeetodite** vahel, kuna mõlema eesmärk on täita lüngad. Viimase puhul on täidetavad lüngad brauseri funktsionaalsuses. Mõiste võeti kasutusele Sharpi 2009. aasta raamatus ***„Introducing HTML5”***, mille ta kirjutas koos Bruce Lawsoniga. Polyfill kehtestus seejärel selliste koodikomponentide ametlikuks nimetuseks.

## Milliseid polyfille on olemas?

Asjaolu, et termin „polyfill” on tihedalt seotud **HTML5-ga**, ei ole juhuslik. Tänu oma täiustatud funktsioonidele, mis on muu hulgas muutnud flash-videod *tarbetuks*, on hüperteksti märgistuskeele viies versioon saanud veebi püsivaks osaks. Siiski on **HTML5 toetus brauserites** arenenud üsna aeglaselt. Lisaks HTML5 elementidele loodud polyfillidele kasutatakse **polyfill-koodiblokke** ka järgmiste veebielementide integreerimiseks:

- **SVG-graafika**: SVG-vorming SVG (**Scalable** **Vector** **Graphics**), mida W3C konsortsium hakkas 2001. aastal soovitama vektorgraafika standardvorminguna, sai esmakordselt populaarsuse HTML5-ga. Kuna paljud brauserid ei toeta veel seda vormingut, on olemas SVG-polüfillid, nagu [svgweb](https://code.google.com/archive/p/svgweb/ "Google Code Archive: svgweb polyfill").
- **ECMAScript**: ECMAScript on JavaScripti standardiseeritud tuum ja seda uuendatakse regulaarselt, et laiendada keele funktsionaalsust. Sellised funktsioonid nagu Promise-objektid või Symbol-funktsioonid on vanemates brauserites kättesaadavad polüfillide kaudu, nagu JavaScripti standardteek [core-js](https://github.com/zloirock/core-js "JavaScript library core-js GitHub site").
- **Veebimälu**: küpsiste alternatiivid, nagu **kohalik mälu** (pikaajaline mälu kliendi poolel) ja **sessiooni mälu** (mälu, mis on piiratud praeguse sessiooniga), mida ühiselt nimetatakse veebimäluks või DOM-mäluks, ei ole kõikides brauseri versioonides toetatud. MIT-litsentsiga [webstorage-polyfill](https://github.com/Macil/webstorage-polyfill "webstorage-polyfill on github.com") on tuntud lahendus sellele probleemile.
- **Cross-Origin Resource Sharing (CORS)**: CORS võimaldab veebirakendustel pääseda ligi veebiressurssidele, mis asuvad väljaspool oma serverit. Paljud vanemad brauserid ei toeta seda andmevahetust. JavaScripti pakett [XDomain](https://github.com/jpillora/xdomain "github.com: XDomain") ja CORS polyfill [XHook](https://github.com/jpillora/xhook "GitHub index of CORS XHook polyfill") võivad aidata seda probleemi lahendada.
- **CSS (Cascading Style Sheets)**: aastaid on CSS olnud üks olulisemaid vahendeid veebisaitide visuaalse kujunduse loomiseks. Aja jooksul on stiililehed muutunud mitmekülgsemaks, mistõttu on polyfillid muutunud populaarseks vanemate brauseritega suhtlemisel. Üks tuntumaid vahendeid on [css-polyfills.js](https://philschatz.com/css-polyfills.js/ "css-polyfills.js on philschatz.com").
- **Geolokatsioon**: pikka aega ei toetanud brauserid geolokatsiooni API-d (mida kasutatakse kasutaja asukoha edastamiseks) ja seda sai kasutada ainult täiendava brauseri pistikprogrammi abil. Polyfilli abil saate pakkuda seda funktsiooni kasutajatele, kellel on vanemad brauseri versioonid, mis ei toeta API-d.

Note Polüfillide kasutamise lihtsustamiseks ja optimeerimiseks kasutavad sellised teenused nagu Polyfill.io projekt skriptide edastamiseks sisu edastamise võrke (CDN). 2024. aasta alguses on aga tekkinud olulised probleemid **pahavara levikuga Polyfill.io poolt kasutatavate CDN-ide kaudu**. Kui kasutate seda teenust, peaksite oma veebisaidilt eemaldama kogu Polyfill.io projektist pärit koodi.

## Kuidas kasutatakse polyfille? (Koodinäited lisatud)

Võite polyfill JavaScripti koodi või polyfill skripte otse veebisaidi HTML-dokumenti lisada. Need **integreeruvad sujuvalt olemasolevasse lähtekoodi** ja käivituvad ainult juhul, kui brauser ei toeta konkreetset veebifunktsiooni. Selleks kasutatakse tavaliselt JavaScripti `if`, et kontrollida puuduvat tuge. Toetuse puudumine võib seejärel muutuda skripti aktiveerimise tingimuseks. Järgmises kahes näites illustreerime, kuidas seda rakendada, ja näitame, milline on **polyfilli üldine struktuur**.

### Näide 1: Polyfill JavaScripti meetodile `startsWith()`

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

See väike JavaScripti koodijupp võimaldab kutsuvale brauseril kasutada `startsWith()` meetodit, isegi kui see seda algselt ei toeta. See meetod, mis on osa ECMAScript 6 spetsifikatsioonist, kontrollib, kas **string algab teise stringi tähe või tähemärkide jadaga**. Kui see nii on, siis tagastab see väärtuse „true”, muidu tagastab väärtuse „false”. [Arendaja Mathias Bynensi GitHubi lehelt](https://github.com/mathiasbynens/String.prototype.startsWith "GitHub page: mathiasbynens") leiate keerulisema ja optimeeritud versiooni `startsWith()` integreerimiseks.

Note Siin esitatud kood ei tööta, kui veebikliendil on JavaScript blokeeritud või skriptikeel selle seadetes keelatud.

### Näide 2: Veebimälu polyfill

See JavaScripti polyfill on lihtne kodeerimislahendus, mis muudab kohaliku ja sessiooni salvestamise kättesaadavaks vanemates brauseri mudelites.

```javascript
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');
    })();
}
```

Eespool esitatud kood on **kohe** **käivitatav** **funktsiooniväljend**(IIFE). Enne kui brauser selle laadib, kontrollib koodi esimeses reas olev käsk `if`, kas klient toetab veebimälu tehnoloogiaid. Kui toetab, siis väärtus `if` tagastab vale väärtuse, kuna kohaliku ja seansimälu tüübid on juba määratletud. Selle tulemusena jäetakse polyfill kõrvale.


This is a markdown version of: [https://www.ionos.com/et-ee/digitalguide/veebisaidid/veebiarendus/poluefiil/](https://www.ionos.com/et-ee/digitalguide/veebisaidid/veebiarendus/poluefiil/) for AI/LLM consumption.