Žiniatinklio platformos suderinamumas: išsamus JavaScript polifilų kūrimo vadovas

Nuolat besikeičiančiame interneto svetainių kūrimo pasaulyje labai svarbu užtikrinti suderinamumą tarp skirtingų naršyklių ir platformų. Nors modernios naršyklės stengiasi laikytis interneto standartų, senesnėms ar mažiau pažangioms naršyklėms gali trūkti tam tikrų JavaScript funkcijų palaikymo. Būtent čia į pagalbą ateina JavaScript polifilai, veikiantys kaip svarbūs tiltai, leidžiantys moderniam kodui sklandžiai veikti įvairiose aplinkose. Šis vadovas gilinsis į polifilų kūrimo subtilybes, suteikdamas jums žinių ir metodų, kaip kurti patikimas ir visame pasaulyje suderinamas interneto programas.

Kas yra JavaScript polifilas?

Polifilas (angl. polyfill) – tai kodo dalis (dažniausiai JavaScript), kuri suteikia funkcionalumą, kurio naršyklė nepalaiko natūraliai. Iš esmės tai kodo fragmentas, kuris „užpildo spragą“, įgyvendindamas trūkstamą funkciją naudojant esamas technologijas. Terminas „polyfill“ pasiskolintas iš produkto, skirto skylėms užpildyti (pvz., „Polyfilla“). Interneto svetainių kūrime polifilas išsprendžia trūkstamų funkcijų problemas senesnėse naršyklėse, leisdamas kūrėjams naudoti naujesnes funkcijas neatstumiant senesnių sistemų vartotojų.

Pagalvokite apie tai taip: norite savo svetainėje naudoti naują, blizgančią JavaScript funkciją, tačiau dalis jūsų vartotojų vis dar naudoja senesnes naršyklės, kurios tos funkcijos nepalaiko. Polifilas yra tarsi vertėjas, leidžiantis senai naršyklei suprasti ir įvykdyti naują kodą, užtikrinant nuoseklią patirtį visiems vartotojams, nepriklausomai nuo jų pasirinktos naršyklės.

Polifilai ir „shims“

Terminai „polyfill“ ir „shim“ dažnai vartojami kaip sinonimai, tačiau yra subtilus skirtumas. Nors abu sprendžia suderinamumo problemas, polifilas konkrečiai siekia atkartoti tikslų trūkstamos funkcijos elgesį, o „shim“ paprastai pateikia sprendimo būdą arba pakaitalą platesnei suderinamumo problemai. Polifilas *yra* „shim“ tipas, bet ne visi „shims“ yra polifilai.

Pavyzdžiui, Array.prototype.forEach metodo polifilas įgyvendintų tikslų funkcionalumą, apibrėžtą ECMAScript specifikacijoje. Kita vertus, „shim“ galėtų pasiūlyti bendresnį sprendimą iteruoti per į masyvą panašius objektus, net jei jis puikiai neatkartotų forEach elgesio.

Kodėl verta naudoti polifilus?

Polifilų naudojimas suteikia keletą pagrindinių privalumų:

• Geresnė vartotojo patirtis: Užtikrina nuoseklią ir funkcionalią patirtį visiems vartotojams, nepriklausomai nuo jų naršyklės. Vartotojai gali naudotis visu funkcionalumu, net jei jų naršyklės nėra naujausių modelių.
• Modernaus kodo naudojimas: Leidžia kūrėjams naudotis naujausiomis JavaScript funkcijomis ir API, neaukojant suderinamumo. Jums nereikia rašyti kodo pagal mažiausią įmanomą naršyklių vardiklį.
• Ateities užtikrinimas: Leidžia laipsniškai tobulinti savo programas, žinant, kad senesnės naršyklės vis tiek galės veikti.
• Sumažintos kūrimo išlaidos: Leidžia išvengti poreikio rašyti atskirus kodo kelius skirtingoms naršyklėms, supaprastinant kūrimą ir priežiūrą. Viena kodo bazė visiems vartotojams.
• Geresnis kodo palaikymas: Skatina švaresnį ir lengviau prižiūrimą kodą, naudojant modernią JavaScript sintaksę.

Funkcijų aptikimas: polifilų pagrindas

Prieš taikant polifilą, labai svarbu nustatyti, ar naršyklei jo iš tikrųjų reikia. Būtent čia pasitarnauja funkcijų aptikimas. Funkcijų aptikimas apima patikrinimą, ar naršyklė palaiko konkrečią funkciją ar API. Jei ji nepalaikoma, taikomas polifilas; kitu atveju naudojama naršyklės integruota implementacija.

Kaip įgyvendinti funkcijų aptikimą

Funkcijų aptikimas paprastai įgyvendinamas naudojant sąlyginius sakinius ir typeof operatorių arba tikrinant, ar globaliame objekte egzistuoja savybė.

Pavyzdys: Array.prototype.forEach aptikimas

Štai kaip galite nustatyti, ar palaikomas Array.prototype.forEach metodas:

if (!Array.prototype.forEach) {
  // forEach polifilas
  Array.prototype.forEach = function(callback, thisArg) {
    // Polifilo įgyvendinimas
    // ...
  };
}

Šis kodo fragmentas pirmiausia patikrina, ar egzistuoja Array.prototype.forEach. Jei ne, pateikiamas polifilo įgyvendinimas. Jei taip, naudojama naršyklės integruota implementacija, išvengiant nereikalingos apkrovos.

Pavyzdys: fetch API aptikimas

if (!('fetch' in window)) {
  // fetch polifilas
  // Įtraukite fetch polifilo biblioteką (pvz., whatwg-fetch)
  var script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fetch/3.6.2/fetch.min.js';
  document.head.appendChild(script);
}

Šis pavyzdys tikrina, ar window objekte egzistuoja fetch API. Jei nerandama, dinamiškai įkeliama fetch polifilo biblioteka.

Savo polifilų kūrimas: žingsnis po žingsnio vadovas

Savo polifilų kūrimas gali būti naudinga patirtis, leidžianti pritaikyti sprendimus pagal savo konkrečius poreikius. Štai žingsnis po žingsnio polifilų kūrimo vadovas:

1 žingsnis: nustatykite trūkstamą funkciją

Pirmasis žingsnis – nustatyti JavaScript funkciją ar API, kuriai norite sukurti polifilą. Pasitarkite su ECMAScript specifikacija ar patikima dokumentacija (pvz., MDN Web Docs), kad suprastumėte funkcijos elgesį bei laukiamas įvestis ir išvestis. Tai suteiks jums tvirtą supratimą apie tai, ką tiksliai reikia sukurti.

2 žingsnis: ištirkite esamus polifilus

Prieš pradedant rašyti savo polifilą, protinga ištirti esamus sprendimus. Yra didelė tikimybė, kad kas nors jau sukūrė polifilą funkcijai, kurią norite pritaikyti. Egzistuojančių polifilų nagrinėjimas gali suteikti vertingų įžvalgų apie įgyvendinimo strategijas ir galimus iššūkius. Gali būti, kad galėsite pritaikyti ar išplėsti esamą polifilą pagal savo poreikius.

Ištekliai, tokie kaip npmjs.com ir polyfill.io, yra puikios vietos ieškoti esamų polifilų.

3 žingsnis: įgyvendinkite polifilą

Kai aiškiai suprasite funkciją ir ištirsite esamus sprendimus, laikas įgyvendinti polifilą. Pradėkite kurdami funkciją ar objektą, kuris atkartoja trūkstamos funkcijos elgesį. Atidžiai laikykitės ECMAScript specifikacijos, kad užtikrintumėte, jog jūsų polifilas veiks kaip tikėtasi. Įsitikinkite, kad jis yra švarus ir gerai dokumentuotas.

Pavyzdys: String.prototype.startsWith polifilas

Štai pavyzdys, kaip sukurti String.prototype.startsWith metodo polifilą:

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

Šis polifilas prideda startsWith metodą prie String.prototype, jei jo dar nėra. Jis naudoja substr metodą, kad patikrintų, ar eilutė prasideda nurodyta searchString.

4 žingsnis: kruopščiai išbandykite

Testavimas yra kritinė polifilo kūrimo proceso dalis. Išbandykite savo polifilą įvairiose naršyklėse, įskaitant senesnes versijas ir skirtingas platformas. Naudokite automatizuoto testavimo sistemas, tokias kaip Jest ar Mocha, kad užtikrintumėte, jog jūsų polifilas veikia teisingai ir neįveda jokių regresijų.

Apsvarstykite galimybę išbandyti savo polifilą šiose naršyklėse:

• Internet Explorer 9-11 (senesnių versijų palaikymui)
• Naujausios Chrome, Firefox, Safari ir Edge versijos
• Mobiliosios naršyklės iOS ir Android platformose

5 žingsnis: dokumentuokite savo polifilą

Aiški ir glausta dokumentacija yra būtina bet kuriam polifilui. Dokumentuokite polifilo paskirtį, jo naudojimą ir bet kokius žinomus apribojimus. Pateikite pavyzdžių, kaip naudoti polifilą, ir paaiškinkite bet kokias priklausomybes ar būtinąsias sąlygas. Padarykite savo dokumentaciją lengvai prieinamą kitiems kūrėjams.

6 žingsnis: platinkite savo polifilą

Kai būsite tikri, kad jūsų polifilas veikia teisingai ir yra gerai dokumentuotas, galite jį platinti kitiems kūrėjams. Apsvarstykite galimybę paskelbti savo polifilą npm arba pateikti jį kaip atskirą JavaScript failą. Taip pat galite prisidėti prie atvirojo kodo projektų, tokių kaip polyfill.io, su savo polifilu.

Polifilų bibliotekos ir paslaugos

Nors savo polifilų kūrimas gali būti vertinga mokymosi patirtis, dažnai efektyviau naudoti esamas polifilų bibliotekas ir paslaugas. Šie ištekliai siūlo platų iš anksto sukurtų polifilų asortimentą, kurį galite lengvai integruoti į savo projektus.

polyfill.io

polyfill.io yra populiari paslauga, teikianti pritaikytus polifilų paketus, atsižvelgiant į vartotojo naršyklę. Tiesiog įtraukite scenarijaus žymę į savo HTML, ir polyfill.io automatiškai aptiks naršyklę ir pateiks tik reikiamus polifilus.

Pavyzdys: polyfill.io naudojimas

<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>

Ši scenarijaus žymė gaus visus polifilus, reikalingus ES6 funkcijoms palaikyti vartotojo naršyklėje. Galite pritaikyti features parametrą, kad nurodytumėte, kurių polifilų jums reikia.

Core-js

Core-js yra modulinė JavaScript standartinė biblioteka. Ji teikia polifilus ECMAScript iki naujausių versijų. Ją naudoja Babel ir daugelis kitų transpiliatorių.

Modernizr

Modernizr yra JavaScript biblioteka, padedanti aptikti HTML5 ir CSS3 funkcijas vartotojo naršyklėje. Nors ji pati neteikia polifilų, ją galima naudoti kartu su polifilais, kad juos būtų galima sąlygiškai taikyti pagal funkcijų aptikimą.

Geriausios polifilų kūrimo ir naudojimo praktikos

Norėdami užtikrinti optimalų našumą ir palaikomumą, kurdami ir naudodami polifilus laikykitės šių geriausių praktikų:

• Naudokite funkcijų aptikimą: Visada naudokite funkcijų aptikimą, kad išvengtumėte nereikalingo polifilų taikymo. Polifilų taikymas, kai naršyklė jau palaiko funkciją, gali sumažinti našumą.
• Sąlygiškai įkelkite polifilus: Įkelkite polifilus tik tada, kai jų reikia. Naudokite sąlyginio įkėlimo metodus, kad išvengtumėte nereikalingų tinklo užklausų.
• Naudokite polifilų paslaugą: Apsvarstykite galimybę naudoti polifilų paslaugą, pvz., polyfill.io, kad automatiškai pateiktumėte reikiamus polifilus pagal vartotojo naršyklę.
• Kruopščiai testuokite: Išbandykite savo polifilus įvairiose naršyklėse ir platformose, kad įsitikintumėte, jog jie veikia teisingai.
• Atnaujinkite polifilus: Naršyklėms tobulėjant, polifilai gali tapti pasenę arba reikalauti atnaujinimų. Laikykite savo polifilus atnaujintus, kad užtikrintumėte jų efektyvumą.
• Sumažinkite polifilų dydį: Polifilai gali padidinti bendrą jūsų JavaScript kodo dydį. Sumažinkite polifilų dydį pašalindami nereikalingą kodą ir naudodami efektyvius algoritmus.
• Apsvarstykite transpiliavimą: Kai kuriais atvejais transpiliavimas (naudojant įrankius, tokius kaip Babel) gali būti geresnė alternatyva nei polifilų naudojimas. Transpiliavimas konvertuoja modernų JavaScript kodą į senesnes versijas, kurias gali suprasti senesnės naršyklės.

Polifilai ir transpiliatoriai: vienas kitą papildantis požiūris

Polifilai ir transpiliatoriai dažnai naudojami kartu siekiant suderinamumo tarp naršyklių. Transpiliatoriai konvertuoja modernų JavaScript kodą į senesnes versijas, kurias gali suprasti senesnės naršyklės. Polifilai užpildo spragas, suteikdami trūkstamas funkcijas ir API.

Pavyzdžiui, galite naudoti Babel, kad transpiliuotumėte ES6 kodą į ES5 kodą, o tada naudoti polifilus, kad pateiktumėte funkcijų, tokių kaip Array.from ar Promise, implementacijas, kurios nepalaikomos senesnėse naršyklėse.

Šis transpiliavimo ir polifilų naudojimo derinys suteikia išsamų sprendimą suderinamumui tarp naršyklių, leidžiantį naudoti naujausias JavaScript funkcijas ir užtikrinant, kad jūsų kodas sklandžiai veiktų senesnėse aplinkose.

Dažniausi polifilų scenarijai ir pavyzdžiai

Štai keletas dažniausių scenarijų, kur reikalingi polifilai, ir pavyzdžiai, kaip juos įgyvendinti:

1. Object.assign polifilas

Object.assign yra metodas, kuris kopijuoja visų išvardijamų nuosavų savybių vertes iš vieno ar daugiau šaltinio objektų į tikslinį objektą. Jis dažniausiai naudojamas objektams sujungti.

if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) {
      'use strict';
      if (target == null) {
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) {
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}

2. Promise polifilas

Promise yra integruotas objektas, atstovaujantis galutiniam asinchroninės operacijos užbaigimui (arba nesėkmei).

Galite naudoti polifilų biblioteką, pvz., es6-promise, kad pateiktumėte Promise implementaciją senesnėms naršyklėms:

if (typeof Promise === 'undefined') {
  // Įtraukite es6-promise polifilą
  var script = document.createElement('script');
  script.src = 'https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js';
  document.head.appendChild(script);
}

3. Pasirinktinių elementų (Custom Elements) polifilas

Pasirinktiniai elementai leidžia jums apibrėžti savo HTML elementus su pasirinktiniu elgesiu.

Galite naudoti @webcomponents/custom-elements polifilą, kad palaikytumėte pasirinktinius elementus senesnėse naršyklėse:

<script src="https://unpkg.com/@webcomponents/custom-elements"></script>

Polifilų ateitis

Naršyklėms toliau tobulėjant ir priimant naujus interneto standartus, polifilų poreikis laikui bėgant gali sumažėti. Tačiau artimiausioje ateityje polifilai greičiausiai išliks vertingu įrankiu interneto kūrėjams, ypač palaikant senas naršykles arba dirbant su pažangiausiomis funkcijomis, kurios dar nėra plačiai palaikomos.

Interneto standartų kūrimas ir vis didesnis visada atsinaujinančių naršyklių (naršyklių, kurios automatiškai atsinaujina į naujausią versiją) diegimas palaipsniui sumažins priklausomybę nuo polifilų. Tačiau kol visi vartotojai nenaudos modernių naršyklių, polifilai ir toliau atliks lemiamą vaidmenį užtikrinant suderinamumą tarp naršyklių ir teikiant nuoseklią vartotojo patirtį.

Išvados

JavaScript polifilai yra būtini siekiant užtikrinti suderinamumą tarp naršyklių ir platformų interneto svetainių kūrime. Suprasdami jų paskirtį, kūrimo metodus ir geriausias praktikas, galite kurti patikimas ir visame pasaulyje prieinamas interneto programas. Nesvarbu, ar nuspręsite kurti savo polifilus, ar naudoti esamas bibliotekas ir paslaugas, polifilai ir toliau bus vertingas įrankis jūsų interneto kūrimo arsenale. Būtina sekti besikeičiančių interneto standartų ir naršyklių palaikymo naujienas, kad galėtumėte priimti pagrįstus sprendimus, kada ir kaip efektyviai naudoti polifilus. Naršydami po žiniatinklio platformos suderinamumo sudėtingumą, prisiminkite, kad polifilai yra jūsų sąjungininkai siekiant užtikrinti nuoseklią ir išskirtinę vartotojo patirtį visose aplinkose. Priimkite juos, įvaldykite juos ir stebėkite, kaip jūsų interneto programos klesti įvairiapusiame ir dinamiškame interneto pasaulyje.