Polyfill

Această intrare pe tema programării este doar o schiță . Contribuiți la îmbunătățirea acestuia în conformitate cu convențiile Wikipedia .

În programarea web , un polyfill (sau polyfiller ) este un cod descărcabil care oferă servicii care nu fac parte dintr-un browser . Implementează tehnologii pe care un dezvoltator se așteaptă ca browserul să le pună la dispoziție în mod nativ, oferind o gamă mai uniformă de API-uri. De exemplu, multe funcții HTML5 nu sunt acceptate de versiunile Internet Explorer mai vechi de 8 sau 9, dar pot fi folosite de paginile web dacă instalează un polyfill . ^[1] Webshim ^[2] și HTML5 Shivs sunt concepte conexe.

Origini

Termenul provine de la Remy Sharp, care avea nevoie de un cuvânt care să însemne „replică un API folosind JavaScript (sau Flash sau orice altceva) dacă browserul nu îl are în mod nativ” în timp ce colabora la cartea Introducing HTML5 în 2009 . Shim , pentru el, însemna o bucată de cod care putea fi adăugată și care era capabilă să remedieze unele funcționalități, dar care de cele mai multe ori avea propriul API și, prin urmare, nu îndeplinea cerințele terminologice ale Sharp. La fel, termenii de îmbunătățire progresivă și degradare grațioasă nu au satisfăcut nevoile sale, deoarece nu au cerut în mod explicit sau au fost specifice JavaScript.

Sharp a ales polyfill pe termen lung la lacune medii de umplere în funcționalitatea browser - ului și folosind orice număr de tehnici (poli poate însemna „mulți“ în limba greacă). Polyfilla , o pastă folosită pentru a acoperi fisurile și găurile din pereți, a fost, de asemenea, o imagine Sharp găsită potrivită pentru termen. El a primit feedback-ul afirmând că „cuvântul ar trebui schimbat”, dar termenul a devenit acum foarte popular printre dezvoltatorii de web. Sharp nu a promovat termenul pe larg intenționat, folosindu-l doar în cazuri specifice și consideră că a câștigat o expunere largă după ce Paul Irish s-a referit în mod explicit la termen în timpul unei prezentări la câteva luni după înființare și a fost ajutat să devină popular datorită paginii. De Modernizr „Shims HTML5 și polyfill”.

Descriere

Polyfills vă permit să depanați API-ul unui browser sau să adăugați interfețe care nu au fost implementate deloc. Un polyfill este un shim pentru API-ul unui browser. De obicei, un dezvoltator verifică programatic dacă un browser acceptă un API și încarcă un polyfill dacă API-ul nu este prezent. Acest lucru permite dezvoltarea să continue ca și cum API-ul ar fi nativ în browser. Un astfel de exemplu este BrowserID , care se bazează pe un API JavaScript care (începând cu mijlocul anului 2012) nu este prezent în niciun browser și trebuie furnizat printr-un polyfill . ^[3]

Un polyfill diferă de un shim prin faptul că poate fi eliminat fără nicio modificare a restului codului atunci când API-ul neimplementat pe care îl înlocuiește este inclus corect în browser.

Lista poliprimilor cunoscute

html5shiv

În versiunile anterioare Internet Explorer 9, elemente HTML necunoscute precum <section> și <nav> au fost tratate ca elemente goale, rupând structura imbricată a paginii și făcând imposibilă modelarea acelor elemente folosind CSS . Unul dintre cele mai utilizate polifilențe , html5shiv, profită de o altă ciudățenie a Internet Explorer pentru a rezolva această eroare: apelează document.createElement("tagname") pentru fiecare dintre noile elemente HTML5, ceea ce face ca Internet Explorer să le analizeze corect . De asemenea, include un stil implicit de bază pentru aceste elemente HTML5.

 <! - [dacă este IE 9]>
<script src = "path / to / html5shiv.js"> </script>
<! [endif] ->

-fara prefix

În timp ce majoritatea polifilmelor vizează browsere mai vechi, există unele care pur și simplu împing browserele moderne puțin mai departe. Polyfill -prefix-free al lui Lea Verou este de acest tip, permițând browserelor de astăzi să recunoască versiunile neprefixate ale multor proprietăți CSS3 în loc să solicite dezvoltatorului să scrie toate prefixele furnizorului. Citește foile de stil ale paginii și înlocuiește toate proprietățile fără prefix cu omologul lor prefixat recunoscut de browserul curent.

 <Link rel = "stylesheet" href = "/css/styles.css">
< script src = "/path/to/prefixfree.min.js" > </ script >

Selectivizr

Selectivizr-ul lui Keith Clark este un poliamplor popular care face ca mulți selectori CSS3 să funcționeze în Internet Explorer 8 și versiuni anterioare. Citește foile de stil ale paginii pentru un set cunoscut de selectoare CSS3, apoi folosește o bibliotecă de selectoare JavaScript pentru a căuta în document elementele care se potrivesc cu acele selectoare, aplicând stiluri direct acelor elemente. Suportă multe biblioteci de selecție JavaScript, cum ar fi jQuery .

 < script type = "text / javascript" src = "/path/to/jquery.min.js" > </ script >
<! - [if (gte IE 6) & (lte IE 8)]>
<script type = "text / javascript" src = "/ path / to / selectivizr-min.js"> </script>
<noscript> <link rel = "styleheet" href = "/ path / to / fallback-styles.css" /> </noscript>
<! [endif] ->

Flexie

Poate că una dintre cele mai așteptate caracteristici ale CSS3, Layoutul flexibil al cutiei (cunoscut și sub numele de Flexbox) promite să fie un instrument extrem de puternic pentru realizarea elementelor de interfață. Motoarele WebKit și Mozilla susțin de ani de zile o proiectare preliminară a sintaxei. Flexie implementează suport pentru aceeași sintaxă în Internet Explorer și Opera.

Cu toate acestea, specificațiile de proiectare au suferit o revizuire drastică în favoarea unei noi (și mult mai puternice) sintaxi, care nu este încă susținută de Flexie. Flexie poate fi încă utilizat împreună cu vechea sintaxă, dar dezvoltatorii trebuie să se asigure că includ și noua sintaxă pentru browserele viitoare.

 < script src = "/path/to/jquery.min.js" > </ script >
< script src = "/path/to/flexie.min.js" > </ script >

CSS3 PIE

Internet Explorer progresiv (PIE) implementează unele dintre cele mai populare proprietăți de decorare a cutiei CSS3 de care nu are Internet Explorer, inclusiv raza de margine și umbră pentru Internet Explorer 8 și versiunile anterioare și fundalul cu gradient liniar pentru Internet Explorer 9 și versiunile anterioare. Invocat ca un comportament HTC (o caracteristică proprietară a Internet Explorer), caută proprietăți CSS3 neacceptate pe elemente specifice și reprezintă aceste proprietăți folosind VML pentru Internet Explorer 6-8 și SVG pentru Internet Explorer 9. Reprezentarea sa nu se distinge în mare parte de browserul nativ implementări și gestionează bine modificarea dinamică a DOM.

 . cutie {
    raza chenarului : 8 px 8 px 0 0 ;
    box-shadow : # 666 0 px 2 px 3 px ;
    comportament : url ( /path/to/PIE.htc );
}

JSON 2

Douglas Crockford a scris inițial json2.js ca API pentru citirea și scrierea formatului său de date (apoi promițător) JSON. A devenit atât de utilizat pe scară largă încât producătorii de browsere au decis să implementeze API-ul său nativ și să-l transforme într-un standard de facto; json2.js a fost apoi transformat din bibliotecă în poliamplă .

 < script >
if ( ! window . JSON ) {
  document . write ( '<script src = "path / to / json2.js"> <\ / script>' );
}
</ script >

es5-shim

ECMAScript Ediția a V-a (ES5) introduce câteva caracteristici utile noi de scriptare și, deoarece sunt compatibile din punct de vedere sintactic cu motoarele JavaScript mai vechi, ele pot fi în mare parte poliplasate prin corecția metodelor de obiect JavaScript native. Acest polietilenă es5-shim o face în două părți: es5-shim.js conține acele metode care pot fi complet transformate în polifenituri, în timp ce es5-sham.js conține implementări parțiale ale celorlalte metode care depind prea mult de motorul de bază pentru acestea să lucreze în mod adecvat.

 < script src = "/path/to/es5-shim.min.js" > </ script >

FlashCanvas

FlashCanvas este o implementare a HTML5 Canvas API utilizând un plugin Flash. Este o polilocuire comercială rară, disponibilă într-o versiune cu plată și o versiune gratuită, căreia îi lipsesc unele caracteristici avansate, cum ar fi umbrele.

 <! - [dacă este IE 9]>
<script src = "/ path / to / flashcanvas.js"> </script>
<! [endif] ->

MediaElement.js

Polyfill-ul MediaElement.js al lui John Dyer oferă suport pentru elementele <video> și <audio>, inclusiv API-ul MediaElement HTML5, în browsere mai vechi care utilizează pluginuri Flash sau Silverlight. De asemenea, oferă o interfață de utilizator opțională pentru playerul media, care este compatibilă cu toate browserele.

 < link rel = "styleheet" href = "/path/to/mediaelementplayer.min.css" >
< script src = "/path/to/jquery.js" > </ script >
< script src = "/path/to/mediaelement-and-player.min.js" > </ script >

Webshims Lib

Webshims Lib al lui Alexander Farkas împachetează multe alte polifilențe într-un singur pachet și încarcă doar cele solicitate de browserul care vizitează.

 < script src = "/path/to/jquery.min.js" > </ script >
< script src = "/path/to/js-webshim/minified/extras/modernizr-custom.js" > </ script >
< script src = "/path/to/js-webshim/minified/polyfiller.js" > </ script >

< script >
    // Încărcați toate umpluturile acceptate, dacă browserul are nevoie de ele:
    $ . webshims . poliumplere ();
</ script >

Notă

linkuri externe

• O listă de polifenituri care oferă servicii HTML5, din proiectul Modernizr
• O listă de polifențiale HTML5 grupate pe caracteristici , la html5please.com .
• Serviciul Polyfill , pe cdn.polyfill.io .

Portal IT : accesați intrările Wikipedia care se ocupă cu IT