Frontend'i progressiivne täiustamine: funktsioonide tuvastamine ja polüfillid

Pidevalt areneval veebiarenduse maastikul on ühtlase ja ligipääsetava kasutajakogemuse tagamine erinevates brauserites ja seadmetes märkimisväärne väljakutse. Progressiivne täiustamine (PT) pakub selle väljakutse lahendamiseks tugevat strateegiat. See lähenemine seab esikohale baasfunktsionaalsuse pakkumise kõigile kasutajatele, täiustades samal ajal valikuliselt kogemust neile, kellel on kaasaegsed brauserid ja seadmed, mis toetavad täiustatud funktsioone. See artikkel süveneb progressiivse täiustamise põhiprintsiipidesse, keskendudes kahele olulisele tehnikale: funktsioonide tuvastamisele ja polüfillidele.

Mis on progressiivne täiustamine?

Progressiivne täiustamine ei ole pelgalt tehnika; see on filosoofia, mis rõhutab veebisaitide ehitamist, pidades esmatähtsaks ligipääsetavust ja põhifunktsionaalsust. See arvestab veebi kasutavate kasutajaagentide mitmekesisusega, alates vanematest piiratud võimalustega brauseritest kuni uusimate tehnoloogiatega tipptasemel seadmeteni. Homogeense keskkonna eeldamise asemel võtab PT omaks heterogeensuse.

Põhiprintsiip on alustada tugevast, semantilisest HTML-i vundamendist, tagades, et sisu on ligipääsetav ja arusaadav igas seadmes. Seejärel rakendatakse CSS-i esitluse parandamiseks, millele järgneb JavaScript interaktiivsete elementide ja täiustatud funktsionaalsuste lisamiseks. Oluline on, et iga kiht tugineb eelnevale, ilma et see rikuks põhikogemust kasutajate jaoks, kes ei pruugi täiustusi toetada.

Progressiivse täiustamise eelised:

• Ligipääsetavus: Tagab, et põhisisu ja funktsionaalsus on kättesaadavad kõigile kasutajatele, olenemata nende brauserist või seadmest. See on ülioluline puuetega kasutajatele, kes võivad tugineda abitehnoloogiatele.
• Brauseriülene ühilduvus: Pakub ühtlast kogemust laias valikus brauserites, minimeerides katkiste paigutuste või mittetoimivate funktsioonide riski.
• Parem jõudlus: Pakkudes esmalt põhikogemust, on lehe esialgne laadimisaeg sageli kiirem, mis viib parema kasutajakogemuseni.
• SEO eelised: Otsingumootorite robotid pääsevad sisule kergesti juurde ja indekseerivad seda, kuna nad tavaliselt JavaScripti ei käivita.
• Tulevikukindlus: Uute tehnoloogiate tekkimisel võimaldab progressiivne täiustamine neid järk-järgult kasutusele võtta, ilma olemasolevat kasutajakogemust häirimata.

Funktsioonide tuvastamine: teadmine, mida teie brauser suudab teha

Funktsioonide tuvastamine on protsess, mille käigus tehakse programmiliselt kindlaks, kas konkreetne brauser või kasutajaagent toetab teatud funktsiooni, näiteks CSS-i omadust, JavaScripti API-t või HTML-elementi. See on usaldusväärsem lähenemine kui brauseri nuusutamine (brauseri tuvastamine selle kasutajaagendi stringi põhjal), mida saab kergesti võltsida ja mis viib sageli ebatäpsete tulemusteni.

Miks on funktsioonide tuvastamine oluline:

• Sihipärased täiustused: Võimaldab rakendada täiustusi ainult neid toetavates brauserites, vältides vigu ja tarbetut koodi käivitamist vanemates brauserites.
• Sujuv taandareng: Kui funktsiooni ei toetata, saate pakkuda varulahenduse või alternatiivi, tagades, et kasutajatel on endiselt kasutatav kogemus.
• Parem jõudlus: Väldib koodi käivitamist, mis tugineb toetamata funktsioonidele, vähendades vigade riski ja parandades üldist jõudlust.

Levinud funktsioonide tuvastamise tehnikad

JavaScriptis on funktsioonide tuvastamiseks mitu viisi:

1. `typeof`-i kasutamine

Operaatorit `typeof` saab kasutada kontrollimaks, kas muutuja või objekt on defineeritud. See on kasulik globaalsete objektide või funktsioonide olemasolu tuvastamiseks.

            if (typeof window.localStorage !== 'undefined') {
 // localStorage on toetatud
 console.log('localStorage on toetatud!');
} else {
 // localStorage ei ole toetatud
 console.log('localStorage ei ole toetatud!');
}
            

              
                Copy
              
            
          

2. Objekti omaduste kontrollimine

Saate kontrollida, kas objektil on konkreetne omadus, kasutades `in` operaatorit või `hasOwnProperty()` meetodit.

            if ('geolocation' in navigator) {
 // Geolocation API on toetatud
 console.log('Geolocation API on toetatud!');
} else {
 // Geolocation API ei ole toetatud
 console.log('Geolocation API ei ole toetatud!');
}

if (document.createElement('canvas').getContext('2d')) {
 // Canvas on toetatud
 console.log('Canvas on toetatud!');
} else {
 // Canvas ei ole toetatud
 console.log('Canvas ei ole toetatud!');
}
            

              
                Copy
              
            
          

3. Modernizr

Modernizr on populaarne JavaScripti teek, mis lihtsustab funktsioonide tuvastamist. See pakub laia valikut teste erinevate HTML5, CSS3 ja JavaScripti funktsioonide jaoks ning lisab `` elemendile klasse, mis näitavad, milliseid funktsioone toetatakse.

Näide Modernizriga:

            <!DOCTYPE html>
<html class="no-js"> <!-- Lisa 'no-js' klass -->
<head>
 <meta charset="utf-8">
 <title>Modernizr'i näide</title>
 <script src="modernizr.js"></script>
</head>
<body>
 <script>
 if (Modernizr.geolocation) {
 // Geolocation API on toetatud
 console.log('Geolocation API on toetatud!');
 } else {
 // Geolocation API ei ole toetatud
 console.log('Geolocation API ei ole toetatud!');
 }
 </script>
</body>
</html>
            

              
                Copy
              
            
          

Modernizr lisab `` elemendile klassid nagu `.geolocation` või `.no-geolocation`, mis võimaldab teil rakendada CSS-stiile funktsioonide toe põhjal.

            .geolocation .my-element {
 // Stiilid brauseritele, mis toetavad geolokatsiooni
}

.no-geolocation .my-element {
 // Stiilid brauseritele, mis ei toeta geolokatsiooni
}
            

              
                Copy
              
            
          

4. CSS-i funktsioonipäringud (`@supports`)

CSS-i funktsioonipäringud, kasutades `@supports` reeglit, võimaldavad teil tingimuslikult rakendada CSS-stiile, mis põhinevad brauseri toel konkreetsetele CSS-i funktsioonidele. See on võimas viis progressiivse täiustamise rakendamiseks otse oma CSS-is.

            @supports (display: grid) {
 .container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }
}

@supports not (display: grid) {
 .container {
 float: left;
 width: 33.33%;
 }
}
            

              
                Copy
              
            
          

Selles näites kasutavad brauserid, mis toetavad CSS Grid Layout'i, ruudustikupõhist paigutust, samas kui vanemad brauserid langevad tagasi float-põhisele paigutusele.

Polüfillid: lünga ületamine

Polüfill (tuntud ka kui shim) on koodijupp (tavaliselt JavaScript), mis pakub uuema funktsiooni funktsionaalsust vanemates brauserites, mis seda loomulikult ei toeta. Polüfillid võimaldavad teil kasutada kaasaegseid funktsioone, ohverdamata ühilduvust vanemate brauseritega.

Miks on polüfillid olulised:

• Kasuta kaasaegseid funktsioone: Võimaldab teil kasutada uusimaid veebitehnoloogiaid, piiramata oma sihtrühma ainult kaasaegsete brauseritega kasutajatele.
• Ühtlane kogemus: Pakub ühtlast kasutajakogemust erinevates brauserites, isegi kui neil on erinev funktsioonide toe tase.
• Parem arendustöövoog: Võimaldab teil keskenduda parimate tööriistade ja tehnikate kasutamisele, muretsemata brauseri ühilduvuse probleemide pärast.

Levinud polüfillide tehnikad

Polüfillide rakendamiseks on erinevaid lähenemisviise, alates lihtsatest JavaScripti funktsioonidest kuni keerukamate teekideni.

1. Lihtsad JavaScripti polüfillid

Lihtsate funktsioonide jaoks saate sageli luua polüfilli JavaScripti abil. Näiteks `Array.prototype.forEach` meetod võeti kasutusele ECMAScript 5-s. Siin on lihtne polüfill vanematele brauseritele:

            if (!Array.prototype.forEach) {
 Array.prototype.forEach = function(callback, thisArg) {
 if (this == null) {
 throw new TypeError('this on null või pole defineeritud');
 }

 var obj = Object(this);
 var len = obj.length >>> 0;

 if (typeof callback !== 'function') {
 throw new TypeError(callback + ' ei ole funktsioon');
 }

 var context = thisArg;

 for (var i = 0; i < len; i++) {
 if (i in obj) {
 callback.call(context, obj[i], i, obj);
 }
 }
 };
}
            

              
                Copy
              
            
          

2. Polüfilliteekide kasutamine

Mitmed teegid pakuvad polüfille laiale valikule funktsioonidele. Mõned populaarsed valikud on:

• core-js: Põhjalik polüfilliteek, mis katab paljusid ECMAScripti funktsioone.
• polyfill.io: Teenus, mis edastab ainult kasutaja brauserile vajalikud polüfillid, tuginedes selle kasutajaagendile.
• es5-shim: Pakub polüfille ECMAScript 5 funktsioonide jaoks.

Näide core-js-iga:

            <script src="https://cdn.jsdelivr.net/npm/core-js@3.36.0/index.min.js"></script>
            

              
                Copy
              
            
          

See lisab core-js teegi CDN-ist. Seejärel saate kasutada kaasaegseid JavaScripti funktsioone ja core-js pakub automaatselt vajalikud polüfillid vanematele brauseritele.

3. `polyfill.io` teenus

Polyfill.io on teenus, mis kasutab kasutajaagendi stringi, et määrata, milliseid polüfille on vaja, ja edastab brauserile ainult need polüfillid. See võib oluliselt vähendada polüfillide kimbu suurust ja parandada jõudlust.

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

              
                Copy
              
            
          

Saate määrata funktsioonid, mida soovite polüfillida, kasutades `features` parameetrit. Näiteks `features=es6` polüfillib kõik ECMAScript 6 funktsioonid.

Õigete polüfillide valimine

On oluline valida polüfille hoolikalt, kuna tarbetute polüfillide lisamine võib suurendada teie JavaScripti kimbu suurust ja mõjutada jõudlust. Kaaluge järgmisi tegureid:

• Sihtbrauserid: Tehke kindlaks brauserid, mida peate toetama, ja valige polüfillid, mis lahendavad nende brauserite puuduvad funktsioonid.
• Kimbu suurus: Minimeerige oma polüfillide kimbu suurust, kasutades teenust nagu polyfill.io või lisades valikuliselt ainult vajalikud polüfillid.
• Hooldus: Valige polüfilliteegid, mida aktiivselt hooldatakse ja uuendatakse uusimate brauseri funktsioonidega.
• Testimine: Testige oma veebisaiti põhjalikult erinevates brauserites, et tagada polüfillide korrektne toimimine.

Progressiivse täiustamise näited praktikas

Vaatame mõningaid praktilisi näiteid, kuidas progressiivset täiustamist saab rakendada reaalsetes stsenaariumides:

1. HTML5 vormi valideerimine

HTML5 tõi kaasa sisseehitatud vormi valideerimise atribuudid nagu `required`, `email` ja `pattern`. Kaasaegsed brauserid kuvavad veateateid, kui neid atribuute ei täideta. Vanemad brauserid aga ignoreerivad neid atribuute. Progressiivset täiustamist saab kasutada varulahenduse pakkumiseks vanematele brauseritele.

HTML:

            <form action="/submit" method="post">
 <label for="email">E-post:</label>
 <input type="email" id="email" name="email" required>
 <button type="submit">Saada</button>
</form>
            

              
                Copy
              
            
          

JavaScript (polüfill):

            if (!('required' in document.createElement('input'))) {
 // HTML5 vormi valideerimist ei toetata
 var form = document.querySelector('form');
 form.addEventListener('submit', function(event) {
 var email = document.getElementById('email');
 if (!email.value) {
 alert('Palun sisestage oma e-posti aadress.');
 event.preventDefault();
 }
 });
}
            

              
                Copy
              
            
          

Selles näites kontrollib JavaScripti kood, kas `required` atribuuti toetatakse. Kui ei, lisab see vormile sündmusekuulaja, mis teostab elementaarse e-posti valideerimise ja kuvab hoiatusteate, kui e-posti väli on tühi.

2. CSS3 üleminekud

CSS3 üleminekud võimaldavad luua sujuvaid animatsioone, kui CSS-i omadused muutuvad. Vanemad brauserid ei pruugi CSS3 üleminekuid toetada. Progressiivset täiustamist saab kasutada nendele brauseritele varulahenduse pakkumiseks.

CSS:

            .my-element {
 width: 100px;
 height: 100px;
 background-color: blue;
 transition: width 0.5s ease-in-out;
}

.my-element:hover {
 width: 200px;
}
            

              
                Copy
              
            
          

JavaScript (varulahendus):

            if (!('transition' in document.documentElement.style)) {
 // CSS3 üleminekuid ei toetata
 var element = document.querySelector('.my-element');
 element.addEventListener('mouseover', function() {
 element.style.width = '200px';
 });
 element.addEventListener('mouseout', function() {
 element.style.width = '100px';
 });
}
            

              
                Copy
              
            
          

Selles näites kontrollib JavaScripti kood, kas CSS3 üleminekuid toetatakse. Kui ei, lisab see elemendile sündmusekuulajad, mis manipuleerivad otse `width` omadusega hiirega üle libistamisel, pakkudes elementaarset animatsiooniefekti.

3. Veebimälu (localStorage)

Veebimälu (localStorage ja sessionStorage) pakub viisi andmete lokaalseks salvestamiseks kasutaja brauseris. Vanemad brauserid ei pruugi veebimälu toetada. Progressiivset täiustamist saab kasutada küpsiste abil varulahenduse pakkumiseks.

            function setItem(key, value) {
 if (typeof localStorage !== 'undefined') {
 localStorage.setItem(key, value);
 } else {
 // Kasuta küpsiseid varulahendusena
 document.cookie = key + '=' + value + '; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/';
 }
}

function getItem(key) {
 if (typeof localStorage !== 'undefined') {
 return localStorage.getItem(key);
 } else {
 // Loe küpsistest
 var name = key + "=";
 var decodedCookie = decodeURIComponent(document.cookie);
 var ca = decodedCookie.split(';');
 for(var i = 0; i <ca.length; i++) {
 var c = ca[i];
 while (c.charAt(0) == ' ') {
 c = c.substring(1);
 }
 if (c.indexOf(name) == 0) {
 return c.substring(name.length, c.length);
 }
 }
 return "";
 }
}
            

              
                Copy
              
            
          

See näide demonstreerib, kuidas seada ja hankida üksusi localStorage'i abil, kui see on toetatud, ja langeb tagasi küpsiste kasutamisele, kui see ei ole.

Rahvusvahelistumise kaalutlused

Rakendades progressiivset täiustamist globaalsele sihtrühmale, arvestage järgmiste rahvusvahelistumise aspektidega:

• Keeletugi: Veenduge, et teie polüfillid ja varulahendused toetavad erinevaid keeli ja märgistikke.
• Lokaliseerimine: Kasutage lokaliseerimistehnikaid, et pakkuda tõlgitud veateateid ja kasutajaliidese elemente.
• Ligipääsetavus: Järgige ligipääsetavuse juhiseid (WCAG), et tagada teie veebisaidi kasutatavus puuetega inimestele, olenemata nende asukohast või keelest.
• Testimine: Testige oma veebisaiti põhjalikult erinevates keeltes ja piirkondades, et tagada progressiivse täiustamise tehnikate korrektne toimimine.
• Kultuuriline tundlikkus: Olge teadlik kultuurilistest erinevustest ja vältige idioomide või metafooride kasutamist, mis ei pruugi teistes kultuurides arusaadavad olla. Näiteks kuupäevavormingud varieeruvad kultuuriti (MM/DD/YYYY vs DD/MM/YYYY). Kasutage kuupäevade sobivaks vormindamiseks teeki nagu Moment.js või sarnast.

Tööriistad ja ressursid

• Modernizr: JavaScripti teek funktsioonide tuvastamiseks. (https://modernizr.com/)
• core-js: Modulaarne standardteek JavaScripti jaoks. (https://github.com/zloirock/core-js)
• polyfill.io: Teenus, mis edastab polüfille kasutajaagendi põhjal. (https://polyfill.io/)
• Can I use...: Veebisait, mis pakub ajakohaseid brauseri toe tabeleid erinevatele veebitehnoloogiatele. (https://caniuse.com/)
• MDN Web Docs: Põhjalik dokumentatsioon veebitehnoloogiate kohta. (https://developer.mozilla.org/et/)
• WCAG (Web Content Accessibility Guidelines): Rahvusvahelised standardid veebi ligipääsetavuse kohta. (https://www.w3.org/WAI/standards-guidelines/wcag/)

Kokkuvõte

Progressiivne täiustamine on väärtuslik lähenemine veebiarendusele, mis tagab ühtlase ja ligipääsetava kasutajakogemuse laias valikus brauserites ja seadmetes. Kasutades funktsioonide tuvastamist ja polüfille, saate võimendada uusimaid veebitehnoloogiaid, pakkudes samal ajal kindlat vundamenti vanemate brauseritega kasutajatele. See mitte ainult ei paranda kasutajakogemust, vaid suurendab ka ligipääsetavust, SEO-d ja teie veebirakenduste tulevikukindlust. Progressiivse täiustamise põhimõtete omaksvõtmine viib tugevamate, hooldatavamate ja kasutajasõbralikumate veebisaitideni globaalsele sihtrühmale.