Încărcare ușoară în Script cu yepnope.js

Aici intră încărcătoare asincrone pentru a juca. Folosind una dintre mai multe tehnici de încărcare diferite, ele elimină caracterul blocant moștenit al unui script, care permite descărcarea în paralel a JavaScript-urilor și a resurselor, fără a interfera cu redarea paginilor. În multe cazuri, acest lucru poate reduce - uneori drastic - timpul de încărcare a paginilor.

Cele mai multe încărcătoare păstrează ordinea în care sunt executate scripturile oferind în același timp un apel invers atunci când scriptul este încărcat și pregătit.

Încărcarea asincronă nu vine însă fără restricțiile sale. Când script-urile sunt încărcate în mod tradițional, codul inline nu este analizat sau executat până când script-urile externe sunt complet încărcate, secvențial. Nu este cazul în cazul încărcării asincrone. De fapt, scripturile inline vor fi de obicei parse / executate in timp ce scripturile sunt încă descărcate. În același mod, browserul descarcă de asemenea resurse și redă pagina în timp ce sunt încărcate scripturile. Astfel, putem ajunge la situații în care codul inline, care este probabil dependent de un script / bibliotecă care este încărcat, este executat înainte ca dependența să fie gata sau înainte / după ce DOM este însuși gata. Astfel, majoritatea încărcătorilor păstrează ordinea în care sunt executate scripturile, oferind în același timp un apel invers atunci când scriptul este încărcat și pregătit. Acest lucru ne permite să executați orice cod inline dependent ca apel invers, probabil, într-un pachet de pregătire DOM, după caz.

De asemenea, atunci când se ocupă de o pagină mică sau bine optimizată, DOM poate fi de fapt gata sau chiar încărcată înainte ca scenariile să se termine încărcate! Deci, în cazul în care pagina în cauză nu este îmbunătățită treptat, prin faptul că se bazează în mare măsură pe JavaScript pentru styling, poate exista un FOUC sau flash de conținut unstyled. În mod similar, utilizatorii pot chiar să experimenteze un scurt FUBC sau un flash de conținut neabătut. Este important să țineți cont de aceste lucruri ori de câte ori utilizați un încărcător de scripturi / resurse.

Pasul 1 - The yepnope Obiectul de testare

yepnope obiectul de test are șapte proprietăți de bază, dintre care oricare dintre acestea este opțională. Acest obiect include testul real, resursele care vor fi încărcate ca rezultat al testului, resursele care vor fi încărcate indiferent de test, precum și de apeluri. Iată o privire la recuzita obiectului testului yepnope:

• Test:

  Un boolean reprezentând condiția pe care vrem să o testăm.

• Da:

  Un șir sau un array / obiect de șiruri de caractere reprezintă urlul de resurse pentru încărcare dacă este testul truthy.

• nope:

  Un șir sau un array / obiect de șiruri de caractere reprezintă urlul de resurse pentru încărcare dacă este testul Falsey.

• sarcină:

  Un șir sau un array / obiect de șiruri de caractere reprezintă urlul de resurse pentru încărcare, indiferent de rezultatul testului.

• ambii:

  Un șir sau un array / obiect de șiruri de caractere reprezintă urlul de resurse pentru încărcare, indiferent de rezultatul testului. Acesta este, în principiu, zahăr sintactic, deoarece funcția sa este, în general, aceeași ca și sarcină funcţie.

• suna inapoi:

  O funcție care va fi solicitată fiecare deoarece este încărcat secvențial.

• complet:

  O funcție care va fi apelată o singura data când toate resursele au fost încărcate.

Acum, pentru a obține o idee despre sintaxă, să aruncăm o privire la cea mai simplă utilizare posibilă a yepnope: încărcarea unei singure resurse.

 yepnope ( 'resurse / someScript.js');

... sau poate încărcarea unei game de resurse.

 yepnope (['resources / someScript.js', 'resurse / someStyleSheet.css']);

Ce zici de un obiect literal, astfel încât să putem utiliza apeluri numite mai târziu?

 yepnope ('someScript': 'resurse / someScript.js', 'someStyleSheet': 'resurse / someStyleSheet.css');

Rețineți că aceste resurse vor fi încărcate în mod asincron, pe măsură ce pagina este descărcată și redată.

Pasul 2 - Condiții - Testarea caracteristicilor viitorului!

Deci, putem încărca resurse asincron! Este minunat, dar, dacă unele pagini nu necesită o anumită resursă? Sau, dacă o resursă este necesară numai într-un anumit browser care nu suportă o tehnologie de vârf?

Nici o problema! Acesta este scopul în care subiectul principal al lui Yepnope se concentrează. Folosind proprietatea de testare, putem încărca în mod condiționat resurse pe baza nevoilor. De exemplu, să presupunem că biblioteca Modernizer este încărcată.

Pentru cei dintre voi care nu sunteți familiarizați cu Modernizer, este o suită de test excelent utilizată pentru detectarea suportului caracteristicilor HTML5 și CSS3 în browsere.

Moderniserul adaugă numere de clasă corespunzătoare paginilor html element, care reprezintă funcțiile acceptate și nu sunt acceptate, de ex. "js flexbox fără panza"etc. În plus, puteți accesa fiecare dintre testele Modernizer, care returnează valorile booleene, individual, în cadrul codului.

Deci, folosind Modernizatorul, să încercăm hashchange suport eveniment, precum și suport pentru istoria sesiunilor!

Iată o privire la testul nostru:

 yepnope (test: Modernizr.hashchange && Modernizr.history);

Acest test se va întoarce, bineînțeles Adevărat numai dacă browserul acceptă ambele caracteristici.

Pasul 3 - Încărcarea resurselor condiționate

Cu setarea condiției noastre de testare, vom defini acum ce resurse să încărcăm pe baza rezultatului acestui test. Cu alte cuvinte, dacă trebuie să încărcați o anumită resursă atunci când browserul nu are o caracteristică sau testul eșuează, puteți pur și simplu să definiți acea resursă în nope clauză. În schimb, puteți încărca resursele atunci când testul trece, în cadrul Da clauză.

Deci, presupunând că browser-ul nu suportă una dintre aceste două caracteristici, vom încărca plugin-ul hashchange al lui Ben Alman, care permite hashchange și suport istoric în browserele mai vechi care nu acceptă niciuna dintre aceste caracteristici.

Să încărcăm pluginul hashchange:

 yepnope (test: Modernizr.hashchange && Modernizr.history, nope: 'resurse / jquery.ba-hashchange.js');

În exemplul de mai sus, nu vom folosi Da proprietate, deoarece noi oferim doar un shim ar fi nevoie.

Pentru a ilustra Da clauza, totuși, să testăm suportul pentru transformarea CSS3 și apoi să încărcăm o foaie de stil pentru browserele care acceptă transformări și o foaie de stil de vanilie pentru browsere care nu o fac. În plus, vom încărca un plugin jQuery care imită și transformările CSS3.

Utilizând atât yep și nope:

 yepnope (test: Modernizr.csstransforms, yep: 'resources / cssTransform.css' nope: ['resources / noTransform.css', 'jQuery.pseudoTransforms.js']]);

Rețineți că ambele exemple vor încărca toate resursele în mod asincron ca și celelalte descărcări și redări ale paginii!

Pasul 4 - Încărcarea resurselor indiferent de condiția de testare

Yepnope oferă, de asemenea, o modalitate de încărcare a resurselor independent de rezultatele testelor prin metoda sarcină proprietate. sarcină funcția va încărca întotdeauna orice resursă alimentată, indiferent de Test rezultat. În mod similar, ambii prop, care este din nou în esență doar zahăr sintactic, încarcă și resurse, indiferent de rezultatul testului sau, mai exact, de la oricare rezultat.

Încărcare în mod prestabilit:

 yepnope (test: Modernizr.hashchange && Modernizr.history, nope: 'resurse / jquery.ba-hashchange.js', încărcare: 'resources / somethingWhichIsAlwaysLoaded.css',);

Încărcarea în ambele condiții, zahăr sintactic:

 yepnope (test: Modernizr.hashchange && Modernizr.history, nope: 'resurse / jquery.ba-hashchange.js', ambele: 'resources / somethingWhichIsAlwaysLoaded.css',);

În ambele exemple de mai sus, resursele vor fi încărcate, în mod asincron, indiferent de ce.

Pasul 5 - Comenzi de răspuns - Cod dependent după sarcină

Așa cum am menționat mai devreme, nu putem scrie codul în linie în modul obișnuit dacă acest cod depinde de unul dintre scripturile încărcate. Astfel, vom folosi funcția de apel invers yepnope care se declanșează odată pentru fiecare resursă după a terminat încărcarea. Funcția de apel invers acceptă trei parametri cărora li se atribuie următoarele:

• URL-ul

  Acest șir reprezintă adresa URL a resursei încărcate

• rezultat

  Un boolean reprezentând starea încărcăturii.

• cheie

  Dacă folosiți un matrice sau un obiect al resurselor, acesta va reprezenta indicele sau numele proprietății fișierului care a fost încărcat

Să aruncăm o privire la un simplu apel invers cu exemplul pluginului hashchange de la mai devreme. Vom folosi metoda de legare a jQuery pentru a lega un handler la evenimentul hashchange al lui fereastră:

Un simplu apel invers:

 ypnope test: Modernizr.hashchange && Modernizr.history, nope: 'resurse / jquery.ba-hashchange.js', callback: functie (url, rezultat, cheie) $ (function ("hashchange", funcția () console.info (location.hash);););,);

Indiferent de starea în care se află DOM, acest apel invers, care, în acest caz special, se află într-un ambalaj pregătit pentru documente, va declanșa imediat ce resursa este încărcată.

Să presupunem, totuși, că încărcăm mai mult de un script și că trebuie să declanșăm un apel invers pentru fiecare script pe măsură ce se încarcă. Specificarea codului de care avem nevoie pentru a rula în modul de mai sus ar crea o redundanță, deoarece apelul de apel este declanșat de fiecare dată când este încărcată o resursă. Yepnope, cu toate acestea, oferă o modalitate excelentă de a gestiona apelurile de apel pentru fiecare resursă, independent de orice alte callbacks.

Folosind un obiect literal pentru a defini resursele pe care le încărcăm, putem referi fiecare cheie de resurse, individual, în cadrul callback-ului.

Să aruncăm o privire la un exemplu în care încărcăm jQuery, precum și pluginul hashchange al jQuery, care depinde de prima încărcare a jQuery. De data aceasta vom folosi literali de obiecte!

 yepnope (test: Modernizr.hashchange && Modernizr.history, nope: 'jquery': 'resources / jquery-1.5.1.min.js', 'hashch': 'resurse / jquery.ba-hashchange.js' , callback: 'jquery': functie (url, result, key) console.info (' console.info ("Vreau să declanșez numai când scriptul hashchange este încărcat"); // Acest cod va fi adăugat la stackul de apel jQuerys DOM (funcția () $ (window) .bind ('hashchange', funcția ) console.info (locație.hash););););

Folosind exemplul de mai sus ca referință, puteți implementa propriile callbacks pentru fiecare încărcare de resurse într-o manieră ordonată.

Pasul 6 - Complet - Când totul este spus și terminat!

În cele din urmă, avem complet callback, care se numește o singură dată, după ce toate resursele au terminat încărcarea. De exemplu, dacă bootstrapați o aplicație web și codul pe care trebuie să-l executați, depinde de toate fișierele pe care le încărcați, în loc să specificați o suna inapoi pentru fiecare resursă, ați scrie codul în cadrul complet retur apel, astfel încât să fie lansat numai o dată, după încărcarea tuturor dependențelor sale. spre deosebire de suna inapoi funcţie, complet nu ia nici un parametru sau nu are acces la URL-ul, rezultat sau cheie recuzită.

complet suna inapoi:

 yepnope (test: Modernizr.hashchange && Modernizr.history, nope: ['resources / jquery-1.5.1.min.js', 'resurse / jquery.ba-hashchange.js' .info ('Voi face foc numai o singură dată când sunt încărcate ambele jquery și scriptul hashchange'); // Acest cod va fi adăugat la stivă de apel jQuerys DOM (funcția () $ (window) .bind (' , funcția () console.info (location.hash););););

Deci, în esență, complet inversarea apelului este utilă pentru orice lucru care trebuie făcut după ce toate resursele sunt încărcate.

Pasul 7 - Pluginuri Yepnope, prefixe și altele!

Yepnope ne oferă, de asemenea, o altă caracteristică minuțioasă: prefixele și filtrele! Prefixele prestabilite furnizate de yepnope, care sunt întotdeauna prefixate la începutul unei adrese URL a resurselor, sunt utilizate pentru definirea unui fișier ca CSS, preîncărcarea unei resurse sau vizarea Internet Explorer sau a uneia dintre versiunile sale. Haideți să aruncăm o privire:

• css!

  Acest prefix este folosit pentru forțarea yepnope pentru a trata o resursă ca o foaie de stil. În mod implicit, yepnope tratează fișierele .css ca foi de stil și orice altceva ca fișier JavaScript. Deci, dacă serviți dinamic CSS, acest prefix ar forța yepnope să trateze acea resursă ca o foaie de stil.

   yepnope ( 'css styles.php = albastru Schemă de culori!?');

• preîncărcare!

  Acest prefix vă permite să încărcați / cache o resursă fără a o executa.

   yepnope ( 'preîncărcare userInterface.js!');

• și anume!

  Este posibil să existe circumstanțe în care trebuie să încărcați resurse specifice numai dacă lucrați cu Internet Explorer sau cu o versiune specială a Internet Explorer. Astfel, și anume prefixele vă ajută să vizați destinația de încărcare a resurselor și anume sau versiuni specifice ale acestuia. Iată o listă a celor acceptate și anume prefixele unde gt înseamnă "versiuni mai mari decât" și lt înseamnă "versiuni mai mici decât".

  • Internet Explorer:
    și anume!
  • Internet Explorer după numărul versiunii:
    IE5!, IE6!, IE7!, IE8!, IE9!
  • Versiuni Internet Explorer mai mari decât:
    iegt5!, iegt6!, iegt7!, iegt8!
  • Versiunile Internet Explorer mai mici de:
    ielt7!, ielt8!, ielt9!

  Toate aceste filtre sunt în lanț și servesc ca un fel de SAU operator în cazul în care unul dintre ei evaluează Adevărat resursa va fi încărcată. Deci, dacă ar trebui să țintim ie7 și ie8, noi pur și simplu ar prestează filtrele adecvate la url resurselor după cum urmează:

   yepnope ( '! IE7 IE8 userInterface.js!');

Crearea propriilor filtre!

Ar trebui să aveți vreodată nevoie, yepnope oferă, de asemenea, mijloacele de creare a propriilor filtre și prefixe prin intermediul addFilter și addPrefix metode. Orice filtru sau prefix pe care îl creați este depășit resourceObject care conține un număr de elemente de recuzită utile. Amintiți-vă, totuși, să returnați resourceObject deoarece yepnope cere să faceți acest lucru. Iată o privire la resourceObject:

• URL:

  Adresa URL a resursei încărcate.

• prefixe

  Gama de prefixe aplicate.

• autoCallback

  Un apel invers care rulează după fiecare sarcină script, separate de celelalte.

• noexec

  O valoare booleană care forțează preload-ul fără execuție.

• in schimb

  O funcție avansată care are aceiași parametri ca și încărcătorul.

• forceJS

  Un boolean care forțează resursa să fie tratată ca javascript.

• forceCSS

  Un boolean care obligă resursa să fie tratată ca o foaie de stil.

• by-pass

  Un boolean care determină încărcarea sau nu a resurselor curente

Să presupunem, de exemplu, că doriți să activați funcția de comutare a încărcării resurselor între serverul dvs. CDN și serverul web, în ​​zbor. Putem face asta, totuși !? Da! Să creați două prefixe, unul pentru încărcare de pe CDN și altul pentru încărcare de pe serverul dvs. web.

 yepnope.addPrefix ('local', funcție (resourceObj) resourceObj.url = 'http: // mySite / resources /' + resourceObj.url; return resourceObj;); yepnope.addPrefix ('amazon', funcție (resourceObj) resourceObj.url = 'http://pseudoRepository.s3.amazonaws.com/' + resourceObj.url; return resourceObj;);

Folosind aceste prefixe, acum putem trece ușor între serverul nostru CDN și serverul web!

 yepnope (['local! css / typography.css', 'amazon! defaultStyle.css']);

Pasul 8 - Câteva avertismente

Prin urmare, în timp ce mențineți o amprentă foarte mică, încărcătorul condițional yepnope este alimentat cu energie electrică cu o serie de caracteristici utile! Există totuși câteva lucruri pe care ar trebui să le cunoașteți înainte de a le folosi.

• Nu document.write

  La fel ca orice încărcător asincron, nu îl puteți utiliza document.write.

• Internet Explorer mai puțin de 9 și execuție apel invers

  Versiunile Internet Explorer mai mici de nouă nu garantează faptul că apelurile sunt executate imediat după incendiile scriptului asociat.

• Fii atent cu DOM

  Scriptul dvs. poate fi încărcat și executat înainte ca DOM să fie gata. Deci, dacă manipulați DOM, este recomandabil să utilizați un pachet de pregătire DOM.

• Ar trebui totuși să combinați unde puteți

  Doar pentru că utilizați un încărcător asincron nu înseamnă că nu ar trebui să vă combinați resursele acolo unde puteți.

• Limitele de încărcare asincrone Internet Explorer

  Versiunile mai vechi ale Internet Explorer pot încărca două resurse din același domeniu în același timp, unde alte versiuni pot încărca până la șase. Deci, dacă încărcați mai multe fișiere, luați în considerare utilizarea unui subdomeniu sau a unui CDN.

Concluzie - Gânduri pe yepnope.js

În ansamblu, mi-am dat seama că yepnope este o mare utilitate! Nu numai că suportă încărcarea asincronă a ambelor scripturi și foi de stiluri, dar vă oferă o metodă plăcută și curată de încărcare condiționată a polifloanelor HTML5 și CSS3. Mecanismul de apel invers este bine gândit și abilitatea de a adăuga propriile prefixe și filtre este doar minunată! Din punct de vedere al performanței, am aflat că există o situație similară cu alte încărcătoare, cum ar fi LABjs-ul Getify Solutions și requi.js ale lui James Burke. Evident, fiecare încărcător este diferit și se potrivește unei nevoi diferite, dar dacă nu ați făcut-o încă, vă încurajez să dați yepnope.js un du-te!