Kas ir polifilli?

Contents

Polyfills ir koda komponenti, kas padara jaunākas tīmekļa funkcijas lietojamas pārlūkprogrammās, kuras šādas funkcijas neatbalsta. Šajā rakstā ir izskaidrots, kas ir šie praktiskie koda komponenti un kā tos var izmantot.

Kas ir polyfills un kādās valodās tos var rakstīt?

Polyfill, ko dažkārt sauc arī par Polyfiller, ir dažādas sarežģītības koda bloks, kas padara mūsdienīgas HTML, CSS vai JavaScript funkcijas pieejamas vecākās pārlūkprogrammās, kuras tās nespēj atbalstīt. Lielākā daļa polyfill ir rakstīti JavaScript, tomēr arī citas tīmekļa programmēšanas valodas var kalpot par pamatu aizpildīšanas skriptiem. Dažas no svarīgākajām funkcijām, ko polyfill padara pieejamas dažādās tīmekļa pārlūkprogrammās, ir HTML5 komponenti, piemēram, bitmap balstīti canvas elementi grafikai, diagrammām un animācijām.

Note

Termins „polyfill” ir cēlies no populārā britu zīmola Polyfilla, kas ir pildviela renovācijas un restaurācijas darbiem. Tīmekļa izstrādātājs Remy Sharp saskatīja atbilstošu salīdzinājumu starp pildvielu un šiem noderīgajiem apvedceļu kodiem, jo abu mērķis ir aizpildīt robus. Pēdējā gadījumā aizpildāmie robus ir robus pārlūka funkcionalitātē. Šis jēdziens tika ieviests Sharp 2009. gada grāmatā „Introducing HTML5”, ko viņš sarakstīja kopā ar Bruce Lawson. Polyfill vēlāk kļuva par oficiālo nosaukumu šādiem koda komponentiem.

Kādi ir polifilu veidi?

Tas, ka termins „polyfill” ir cieši saistīts ar HTML5, nav nejaušība. Ar savām uzlabotajām funkcijām, kas, cita starpā, padarījušas flash video nepieciešamību par pagātni, piektā versija hiperteksta atzīmējumu valodai ir kļuvusi par pastāvīgu tīmekļa funkciju. Tomēr atbalsts HTML5 pārlūkprogrammās ir attīstījies diezgan lēni. Papildus polyfill, kas izveidots HTML5 elementiem, polyfill koda bloki tiek izmantoti arī, lai integrētu šādus tīmekļa elementus:

SVG grafika: SVG formāts SVG (Scalable Vector Graphics), ko W3C konsorcijs 2001. gadā sāka ieteikt kā standarta formātu vektorgrafikai, vispirms ieguva popularitāti ar HTML5. Taču, tā kā daudzas pārlūkas vēl nesniedz atbalstu šim formātam, ir pieejami SVG polyfills, piemēram, svgweb.
ECMAScript: ECMAScript ir standartizēts JavaScript kodols, kas tiek regulāri atjaunināts, lai paplašinātu valodas funkcionalitāti. Funkcijas, piemēram, Promise objekti vai Symbol funkcijas, vecākās pārlūkprogrammās ir pieejamas, izmantojot polyfills, piemēram, JavaScript standarta bibliotēku core-js.
Tīmekļa uzglabāšana: sīkdatņu alternatīvas, piemēram, vietējā uzglabāšana (ilgtermiņa uzglabāšana klienta pusē) un sesijas uzglabāšana (uzglabāšana, kas ierobežota ar pašreizējo sesiju), kopā pazīstamas kā tīmekļa uzglabāšana vai DOM uzglabāšana, netiek atbalstītas visās pārlūku versijās. MIT licencētais webstorage-polyfill ir labi pazīstams risinājums šai problēmai.
Cross-Origin Resource Sharing (CORS): CORS ļauj tīmekļa lietojumprogrammām piekļūt tīmekļa resursiem, kas atrodas ārpus paša servera. Daudzas vecākas pārlūkas neatbalsta šo datu apmaiņu. JavaScript pakete XDomain un CORS polyfill XHook var palīdzēt risināt šo problēmu.
CSS (Cascading Style Sheets): gadiem ilgi CSS ir bijis viens no svarīgākajiem rīkiem tīmekļa vietņu vizuālā izkārtojuma veidošanai. Laika gaitā stilu lapas ir kļuvušas daudzfunkcionālākas, padarot polyfills populārus saskarnē ar vecākām pārlūkprogrammām. Viens no pazīstamākajiem rīkiem ir css-polyfills.js.
Ģeolokācija: ilgu laiku ģeolokācijas API (ko izmanto, lai pārraidītu lietotāja atrašanās vietu) netika atbalstīts pārlūkprogrammās un to varēja izmantot tikai ar papildu pārlūkprogrammas spraudņa palīdzību. Ar polyfill jūs varat nodrošināt šo funkcionalitāti lietotājiem ar vecākām pārlūkprogrammu versijām, kas neatbalsta API.

Kā tiek izmantoti polifili? (Iekļauti koda piemēri)

Jūs varat tieši ievietot polyfill JavaScript kodu vai polyfill skriptus tīmekļa vietnes HTML dokumentā. Tie nevainojami integrējas esošajā avota kodā un tiek izpildīti tikai tad, ja pārlūks neatbalsta konkrēto tīmekļa funkciju. Parasti to dara, izmantojot JavaScript if, lai pārbaudītu trūkstošo atbalstu. Atbalsta trūkums var tikt pārvērsts par nosacījumu skripta aktivizēšanai. Turpmākajos divos piemēros mēs parādīsim, kā to īstenot, un parādīsim, kā izskatās polyfill vispārējā struktūra.

1. piemērs: Polyfill JavaScript metodei `startsWith()`

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

javascript

Šis nelielais JavaScript fragments ļauj izsaucējam pārlūkprogrammai izmantot startsWith() metodi, pat ja tā to neatbalsta. Šī metode, kas ir daļa no ECMAScript 6 specifikācijas, pārbauda, vai virkne sākas ar cita virknes rakstzīmi vai rakstzīmju virkni. Ja tā ir, tā atgriež ‘true’, citādi tā atgriež ‘false’. Sarežģītāku, optimizētu versiju startsWith() integrēšanai varat atrast GitHub lapā, ko izveidojis izstrādātājs Mathias Bynens.

Note

Šeit norādītais kods nedarbosies, ja tīmekļa klients bloķē JavaScript vai tā iestatījumos ir atspējota skriptu valoda.

2. piemērs: tīmekļa uzglabāšanas polyfill

Šis JavaScript polyfill ir vienkāršs kodēšanas risinājums, kas padara vietējo un sesijas uzglabāšanu pieejamu vecākos pārlūku modeļos.

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