# Kas yra polyfills?

**Polyfills** yra kodų komponentai, kurie leidžia naudoti naujesnes žiniatinklio funkcijas naršyklėse, kurios iš prigimties nepalaiko tokių funkcijų. Šiame straipsnyje paaiškinama, kas yra šie praktiniai **kodų komponentai** ir kaip juos galima naudoti.

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

Polyfill, kartais vadinamas Polyfiller, yra įvairaus sudėtingumo kodų blokas, kuris leidžia naudoti šiuolaikines HTML, CSS ar JavaScript funkcijas senesnėse naršyklėse, kurios iš prigimties jų nepalaiko. Dauguma polyfill yra parašyti JavaScript kalba, tačiau kitos žiniatinklio programavimo kalbos taip pat gali būti naudojamos kaip užpildymo skriptų pagrindas. Kai kurios iš svarbiausių funkcijų, kurias polyfill leidžia naudoti skirtingose žiniatinklio naršyklėse, yra HTML5 komponentai, pvz., bitmap pagrįsti canvas elementai grafikai, diagramoms ir animacijoms.

Note Terminas „polyfill“ kilęs iš populiarios britų prekės ženklo „Polyfilla“, kuris yra užpildas, skirtas renovacijos ir restauravimo darbams. Interneto kūrėjas Remy Sharp pastebėjo tinkamą palyginimą tarp **užpildo** ir šių naudingų **aplinkinių kodų**, nes abiejų tikslas yra užpildyti spragas. Pastaruoju atveju užpildytinos spragos yra naršyklės funkcionalumo spragos. Ši sąvoka buvo sukurta Sharp 2009 m. knygoje ***„Introducing HTML5“***, kurią jis parašė kartu su Bruce Lawson. Vėliau „polyfill“ tapo oficialiu tokių kodų komponentų pavadinimu.

## Kokios yra polyfill rūšys?

Tai, kad terminas „polyfill“ yra glaudžiai susijęs su **HTML5**, nėra atsitiktinumas. Dėl savo pažangių funkcijų, kurios, be kita ko, padarė flash vaizdo įrašus *atgyvenusiais*, penktoji hiperteksto žymėjimo kalbos versija tapo nuolatine interneto funkcija. Tačiau **HTML5 palaikymas naršyklėse** vystėsi gana lėtai. Be polyfill, sukurtų HTML5 elementams, **polyfill kodų blokai** taip pat naudojami integruoti šiuos interneto elementus:

- **SVG grafika**: SVG formatas SVG (**Scalable** **Vector** **Graphics**), kurį W3C konsorciumas 2001 m. pradėjo rekomenduoti kaip standartinį vektorinės grafikos formatą, pirmą kartą sulaukė populiarumo su HTML5. Tačiau kadangi daugelis naršyklių dar nepalaiko šio formato, yra SVG polyfills, pvz., [svgweb](https://code.google.com/archive/p/svgweb/ "Google Code Archive: svgweb polyfill").
- **ECMAScript**: ECMAScript yra standartizuotas JavaScript branduolys, kuris reguliariai atnaujinamas, siekiant išplėsti kalbos funkcionalumą. Tokios funkcijos kaip Promise objektai ar Symbol funkcijos yra prieinamos senesnėse naršyklėse per polyfills, pvz., JavaScript standartinę biblioteką [core-js](https://github.com/zloirock/core-js "JavaScript library core-js GitHub site").
- **Interneto saugykla**: slapukų alternatyvos, pvz., **vietinė saugykla** (ilgalaikė saugykla kliento pusėje) ir **sesijos saugykla** (saugykla, ribota iki dabartinės sesijos), kartu vadinamos interneto saugykla arba DOM saugykla, nėra palaikomos visose naršyklių versijose. MIT licencijuotas [webstorage-polyfill](https://github.com/Macil/webstorage-polyfill "webstorage-polyfill on github.com") yra gerai žinomas šios problemos sprendimas.
- **Cross-Origin Resource Sharing (CORS)**: CORS leidžia internetinėms programoms pasiekti internetinius išteklius, esančius už savo serverio ribų. Daugelis senesnių naršyklių nepalaiko šio duomenų mainų. JavaScript paketas [XDomain](https://github.com/jpillora/xdomain "github.com: XDomain") ir CORS polyfill [XHook](https://github.com/jpillora/xhook "GitHub index of CORS XHook polyfill") gali padėti išspręsti šią problemą.
- **CSS (Cascading Style Sheets)**: jau daugelį metų CSS yra vienas iš svarbiausių įrankių, skirtų svetainių vizualiniam išdėstymui kurti. Laikui bėgant stilių lapai tapo universalesni, todėl polyfill tapo populiarūs sąsajai su senesnėmis naršyklėmis. Vienas iš geriausiai žinomų įrankių yra [css-polyfills.js](https://philschatz.com/css-polyfills.js/ "css-polyfills.js on philschatz.com").
- **Geografinė vieta**: ilgą laiką naršyklės nepalaikė Geografinės vietos API (naudojamos perduoti vartotojo buvimo vietą) ir ją buvo galima naudoti tik su papildomu naršyklės įskiepiu. Naudodami polyfill, galite suteikti šią funkciją vartotojams, turintiems senesnes naršyklės versijas, kurios iš prigimties nepalaiko API.

Note Siekiant supaprastinti ir optimizuoti polyfill naudojimą, tokios paslaugos kaip Polyfill.io projektas naudoja turinio pristatymo tinklus (CDN) scenarijų pristatymui. Tačiau nuo 2024 m. pradžios kilo didelių problemų dėl **kenkėjiškų programų platinimo per Polyfill.io naudojamus CDN**. Jei naudojate šią paslaugą, turėtumėte pašalinti iš savo svetainės visą Polyfill.io projekto kodą.

## Kaip naudojami polyfills? (Pateikiami kodo pavyzdžiai)

Jūs galite tiesiogiai įterpti polyfill JavaScript kodą arba polyfill scenarijus į svetainės HTML dokumentą. Jie **sklandžiai integruojasi į esamą šaltinio kodą** ir yra vykdomi tik tuo atveju, jei naršyklė nepalaiko tam tikros interneto funkcijos. Paprastai tai daroma naudojant JavaScript `if`, kad būtų patikrinta, ar trūksta palaikymo. Palaikymo trūkumas gali būti paverstas sąlyga, kuriai esant aktyvuojamas skriptas. Šiuose dviejuose pavyzdžiuose paaiškinsime, kaip tai įgyvendinti, ir parodysime, kaip atrodo **bendra polyfill struktūra**.

### 1 pavyzdys: Polyfill JavaScript metodui `startsWith()`

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

Šis nedidelis JavaScript fragmentas leidžia naršyklei naudoti `startsWith()` metodą, net jei ji jo iš prigimties nepalaiko. Šis metodas, kuris yra ECMAScript 6 specifikacijos dalis, patikrina, ar **eilutė prasideda kitos eilutės simboliu ar simbolių seka**. Jei taip, jis grąžina „true“, kitaip – „false“. Sudėtingesnę, optimizuotą versiją, skirtą integruoti `startsWith()`, galite rasti [kūrėjo Mathias Bynens GitHub puslapyje](https://github.com/mathiasbynens/String.prototype.startsWith "GitHub page: mathiasbynens").

Note Čia pateiktas kodas neveiks, jei žiniatinklio klientas blokuoja JavaScript arba jo nustatymuose yra išjungta skriptų kalba.

### 2 pavyzdys: internetinės saugyklos polyfill

Šis JavaScript polyfill yra paprastas kodavimo sprendimas, kuris leidžia naudoti vietinę ir sesijos saugyklą senesniuose naršyklės modeliuose.

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

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š prigimties palaiko žiniatinklio saugojimo technologijas. Jei palaiko, teiginys `if` grąžins klaidingą vertę, nes vietinio ir sesijos saugojimo tipai jau yra apibrėžti. Dėl to polyfill yra atmestas.


This is a markdown version of: [https://www.ionos.com/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/polyfill/](https://www.ionos.com/lt-lt/digitalguide/interneto-svetaines/interneto-svetainiu-kurimas/polyfill/) for AI/LLM consumption.