Caricamento di script semplice con yepnope.js

È qui che i caricatori asincroni entrano in gioco. Utilizzando una delle diverse tecniche di caricamento, rimuovono la natura di blocco inerente di uno script, che consente il download parallelo di JavaScripts e risorse senza interferire con il rendering della pagina. In molti casi, questo può ridurre, a volte drasticamente, i tempi di caricamento delle pagine.

La maggior parte dei programmi di caricamento conserva l'ordine in cui vengono eseguiti gli script mentre fornisce una richiamata per quando lo script è caricato e pronto.

Il caricamento asincrono non arriva senza i suoi avvertimenti, però. Quando gli script vengono caricati nel modo tradizionale, il codice inline non viene analizzato o eseguito fino a quando gli script esterni non vengono caricati completamente, in modo sequenziale. Questo non è il caso del caricamento asincrono. In effetti, gli script in linea di solito vengono analizzati / eseguiti mentre gli script sono ancora in fase di download. Allo stesso modo, il browser sta anche scaricando risorse e visualizzando la pagina mentre vengono caricati gli script. Quindi, possiamo arrivare a situazioni in cui il codice inline, che dipende forse da uno script / libreria che viene caricato, viene eseguito prima che la sua dipendenza sia pronta o prima / dopo che il DOM stesso sia pronto. Di conseguenza, la maggior parte dei programmi di caricamento conserva l'ordine in cui vengono eseguiti gli script e fornisce una richiamata per quando lo script è caricato e pronto. Ciò ci consente di eseguire qualsiasi codice inline dipendente come callback, eventualmente, all'interno di un wrapper DOM ready, dove applicabile.

Inoltre, quando si ha a che fare con una pagina piccola o ben ottimizzata, il DOM può essere effettivamente pronto o persino caricato prima che gli script stessi abbiano completato il caricamento! Quindi, se la pagina in questione non viene progressivamente migliorata, in quanto si basa in gran parte su JavaScript per lo styling, potrebbe esserci un FOUC o un flash di contenuto senza stile. Allo stesso modo, gli utenti possono anche sperimentare un breve FUBC o flash di contenuti non funzionanti. È importante tenere a mente queste cose ogni volta che usi un caricatore di script / risorse.

Passaggio 1: The yepnope Oggetto di prova

Il yepnope l'oggetto test ha sette proprietà di base, ognuna delle quali è facoltativa. Questo oggetto include il test effettivo, le risorse che verranno caricate come risultato del test, le risorse che verranno caricate indipendentemente dal test e dai callback. Ecco uno sguardo ai puntelli degli oggetti test di yepnope:

• test:

  Un booleano che rappresenta la condizione che vogliamo testare.

• Sì:

  Una stringa o un array / oggetto di stringhe che rappresentano l'url delle risorse da caricare se il test è truthy.

• no:

  Una stringa o un array / oggetto di stringhe che rappresentano l'url delle risorse da caricare se il test è Falsey.

• caricare:

  Una stringa o un array / oggetto di stringhe che rappresentano l'URL delle risorse da caricare indipendentemente dal risultato del test.

• tutti e due:

  Una stringa o un array / oggetto di stringhe che rappresentano l'URL delle risorse da caricare indipendentemente dal risultato del test. Questo è, fondamentalmente, zucchero sintattico in quanto la sua funzione è generalmente la stessa di caricare funzione.

• richiama:

  Una funzione che sarà richiesta ogni risorsa caricata sequenzialmente.

• completare:

  Una funzione che verrà chiamata una volta quando tutte le risorse sono state caricate.

Ora, per avere un'idea della sintassi, diamo un'occhiata all'utilizzo più semplice possibile di yepnope: caricare una singola risorsa.

 yepnope ( 'risorse / someScript.js');

... o forse caricando una serie di risorse.

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

Che ne dici di un oggetto letterale in modo che possiamo usare callback con nome più tardi?

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

Ricorda, queste risorse verranno caricate in modo asincrono mentre la pagina viene scaricata e resa.

Passaggio 2 - Condizioni - Test per le funzionalità del futuro!

Quindi, possiamo caricare le risorse in modo asincrono! È grandioso, ma, cosa succede se alcune pagine non richiedono una certa risorsa? Oppure, cosa succede se una risorsa è necessaria solo in un particolare browser che non supporta una nuova tecnologia all'avanguardia?

Nessun problema! Questo è il punto in cui lo scopo di yepnope viene messo a fuoco. Usando la proprietà test, possiamo caricare condizionalmente le risorse in base alle necessità. Ad esempio, supponiamo che la libreria di Modernizer sia caricata.

Per chi non ha familiarità con Modernizer, è una suite di test elegante utilizzata per rilevare il supporto di funzionalità HTML5 e CSS3 nei browser.

Modernizer aggiunge nomi di classi appropriati alle pagine html elemento, che rappresenta le funzioni supportate e non supportate, ad es. "js flexbox no-canvas"ecc. Inoltre, è possibile accedere a ciascuno dei test di Modernizer, che restituiscono valori booleani, singolarmente, all'interno del codice.

Quindi, usando Modernizer, proviamo per hashchange supporto per gli eventi e supporto per la cronologia delle sessioni!

Ecco uno sguardo al nostro test:

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

Questo test, ovviamente, tornerà vero solo se il browser supporta entrambe queste funzionalità.

Passaggio 3: caricamento delle risorse in modo condizionale

Con il nostro set di condizioni di test, definiremo ora quali risorse caricare in base al risultato di questo test. In altre parole, se hai solo bisogno di caricare una risorsa specifica quando il browser non ha una funzionalità, o il test fallisce, puoi semplicemente definire quella risorsa nel no clausola. Al contrario, è possibile caricare risorse quando il test passa, all'interno del Sì clausola.

Quindi, supponendo che il browser non supporti una di queste due funzionalità, verrà caricato il plug-in hashchange di jQuery di Ben Alman, che abilita hashchange e supporto per la cronologia nei browser più vecchi che non supportano nessuna di queste funzionalità.

Carichiamo il plugin di hashchange:

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

Nell'esempio sopra, non useremo il Sì proprietà in quanto stiamo fornendo uno spessore solo se necessario.

Per illustrare il Sì tuttavia, proviamo per il supporto della trasformazione CSS3 e quindi carichiamo un foglio di stile per i browser che supportano le trasformazioni e un foglio di stile vanilla per i browser che non lo fanno. Inoltre, caricheremo un plugin jQuery che simula anche le trasformazioni CSS3.

Usando entrambi yep e no:

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

Si noti che entrambi questi esempi caricheranno tutte le risorse in modo asincrono mentre il resto della pagina viene scaricato e reso!

Passaggio 4: caricamento delle risorse indipendentemente dalla condizione di test

Yepnope fornisce anche un modo per caricare risorse indipendentemente dai risultati del test tramite il caricare proprietà. Il caricare la funzione caricherà sempre qualsiasi risorsa alimentata, indipendentemente dal test risultato. Allo stesso modo, il tutti e due prop, che è, di nuovo, essenzialmente solo zucchero sintattico, carica anche risorse indipendentemente dal risultato del test, o più accuratamente, su entrambi i risultati.

Caricamento di default:

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

Caricamento in entrambe le condizioni, zucchero sintattico:

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

In entrambi gli esempi precedenti, le risorse verranno caricate in modo asincrono, indipendentemente da cosa.

Passaggio 5 - Richiamate - Codice dipendente dopo il caricamento

Come accennato in precedenza, non possiamo scrivere codice in linea nel solito modo se quel codice dipende da uno degli script che vengono caricati. Quindi, useremo la funzione di callback di yepnope che si attiva una volta per ogni risorsa dopo ha terminato il caricamento. La funzione di callback accetta tre parametri a cui viene assegnato quanto segue:

• url

  Questa stringa rappresenta l'url della risorsa che è stata caricata

• risultato

  Un valore booleano che rappresenta lo stato del carico.

• chiave

  Se si utilizza un array o un oggetto di risorse, questo rappresenterà l'indice o il nome della proprietà del file che è stato caricato

Diamo un'occhiata a una semplice richiamata con l'esempio del plugin hashchange di prima. Useremo il metodo bind di jQuery per associare un gestore all'evento hashchange di finestra:

Un semplice callback:

 yepnope (test: Modernizr.hashchange && Modernizr.history, no: 'resources / jquery.ba-hashchange.js', callback: function (url, result, key) $ (function () $ (window) .bind ('hashchange', function () console.info (location.hash);););,);

Indipendentemente dallo stato in cui si trova il DOM, questo callback, che in questo caso particolare si trova all'interno di un wrapper pronto per il documento, verrà attivato non appena viene caricata la risorsa.

Diciamo, tuttavia, che stiamo caricando più di uno script e che dobbiamo attivare un callback per ogni script mentre viene caricato. Specificare il codice che dobbiamo eseguire nel modo sopra descritto creerebbe una ridondanza poiché la richiamata viene attivata ogni volta che una risorsa viene caricata. Yepnope, tuttavia, offre un ottimo modo per gestire i callback per ciascuna risorsa, indipendentemente da altre callback.

Utilizzando un oggetto letterale per definire le risorse che stiamo caricando, possiamo fare riferimento a ciascuna chiave di risorsa, singolarmente, all'interno del callback.

Diamo un'occhiata a un esempio in cui carichiamo jQuery e il plugin di hashchange di jQuery, che dipende da jQuery che viene caricato per primo. Questa volta, tuttavia, utilizzeremo i letterali degli oggetti!

 yepnope (test: Modernizr.hashchange && Modernizr.history, no: 'jquery': 'resources / jquery-1.5.1.min.js', 'hashch': 'resources / jquery.ba-hashchange.js' , callback: 'jquery': function (url, result, key) console.info ('Farò fuoco solo quando viene caricato lo script jquery');, 'hashch': function (url, result, key)  console.info ('Farò fuoco solo quando lo script hashchange è caricato'); // Questo codice verrà aggiunto a jQuerys DOM call stack $ (function () $ (window) .bind ('hashchange', function ( ) console.info (location.hash););););

Utilizzando l'esempio precedente come riferimento, è possibile implementare le proprie richiamate per ogni carico di risorse in modo ordinato.

Passaggio 6: Completa: quando tutto è Detto e fatto!

Infine, abbiamo il completare callback che viene chiamato solo una volta, dopo che tutte le risorse hanno terminato il caricamento. Ad esempio, se stai "riavvolgendo" un'applicazione web e il codice che devi eseguire dipende da tutti i file che stai caricando, invece di specificare un richiama per ogni risorsa, scriveresti il ​​tuo codice all'interno di completare callback in modo che venga attivato una volta sola, dopo che tutte le sue dipendenze sono state caricate. non mi piace il richiama funzione, completare non prende alcun parametro o ha accesso a url, risultato o chiave oggetti di scena.

Il completare richiama:

 yepnope (test: Modernizr.hashchange && Modernizr.history, no: ['resources / jquery-1.5.1.min.js', 'resources / jquery.ba-hashchange.js'], complete: function () console .info ('Farò fuoco solo una volta quando vengono caricati sia jquery che lo script hashchange'); // Questo codice verrà aggiunto a jQuerys DOM call stack $ (function () $ (window) .bind ('hashchange' , function () console.info (location.hash););););

Quindi, essenzialmente, il completare callback è utile per tutto ciò che deve essere fatto una volta caricate tutte le risorse.

Step 7 - Plugin, prefissi e altro di Yepnope!

Yepnope ci fornisce anche un'altra piccola caratteristica: prefissi e filtri! I prefissi predefiniti forniti da yepnope, che sono sempre preposti all'inizio di un URL di risorsa, vengono utilizzati per definire un file come CSS, precaricare una risorsa o il targeting di Internet Explorer o una delle sue versioni, rispettivamente. Diamo un'occhiata:

• css!

  Questo prefisso viene utilizzato per forzare yepnope a trattare una risorsa come un foglio di stile. Per impostazione predefinita, yepnope tratta i file .css come fogli di stile e tutto il resto come un file JavaScript. Quindi, se stai servendo i CSS in modo dinamico, questo prefisso costringerebbe yepnope a trattare quella risorsa come un foglio di stile.

   yepnope ( 'css styles.php colorscheme = blue!?');

• precarico!

  Questo prefisso consente di caricare / memorizzare una risorsa in cache senza eseguirla.

   yepnope ( 'precaricare userInterface.js!');

• vale a dire!

  Potrebbero esserci circostanze in cui è necessario caricare risorse specifiche solo se si sta lavorando con Internet Explorer o una particolare versione di Internet Explorer. Quindi, il vale a dire i prefissi ti aiutano a indirizzare il caricamento delle risorse su vale a dire o versioni specifiche di esso. Ecco una lista dei supportati vale a dire prefissi dove gt sta per "versioni superiori a" e lt sta per "versioni inferiori a".

  • Internet Explorer:
    vale a dire!
  • Internet Explorer per numero di versione:
    IE5!, IE6!, IE7!, IE8!, IE9!
  • Versioni di Internet Explorer maggiori di:
    iegt5!, iegt6!, iegt7!, iegt8!
  • Versioni di Internet Explorer inferiori a:
    ielt7!, ielt8!, ielt9!

  Tutti questi filtri sono concatenabili e servono come una sorta di O Operatore nel senso che se uno di loro valuta vero la risorsa verrà caricata. Quindi, se avessimo bisogno di targetizzare ie7 e ie8, dovremmo semplicemente anteporre i filtri appropriati all'URL della risorsa come segue:

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

Creare i tuoi filtri!

Dovresti averne bisogno, yepnope fornisce anche i mezzi con cui creare i propri filtri e prefissi tramite il addFilter e addPrefix metodi. Qualsiasi filtro o prefisso che hai creato è passato a resourceObject contenente un numero di oggetti di scena utili. Ricorda, tuttavia, di restituire il resourceObject come un teologo richiede che tu faccia così. Ecco uno sguardo al resourceObject:

• url:

  L'URL della risorsa caricata.

• prefissi

  La matrice di prefissi applicati.

• autoCallback

  Un callback che viene eseguito dopo il caricamento di ogni script, separato dagli altri.

• noexec

  Un valore booleano che forza il precarico senza esecuzione.

• anziché

  Una funzione avanzata che prende gli stessi parametri del caricatore.

• forceJS

  Un booleano che costringe la risorsa ad essere trattata come javascript.

• forceCSS

  Un booleano che costringe la risorsa a essere trattata come un foglio di stile.

• circonvallazione

  Un valore booleano che determina se caricare o meno la risorsa corrente

Supponiamo, ad esempio, che sia possibile attivare e disattivare il caricamento delle risorse tra la tua rete CDN e il server web. Possiamo farlo, però !? Sì! Creiamo due prefissi, uno per il caricamento dal CDN e l'altro per il caricamento dal tuo server web.

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

Usando questi prefissi, possiamo ora passare facilmente tra il nostro CDN e il web server!

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

Passaggio 8: alcuni avvertimenti

Quindi, pur mantenendo un ingombro ridotto, il caricatore condizionale yepnope è pieno di funzionalità utili! Tuttavia, ci sono alcune cose che dovresti sapere prima di usarlo.

• No document.write

  Come con qualsiasi caricatore asincrono, non è possibile utilizzare document.write.

• Internet Explorer meno di 9 e esecuzione di callback

  Le versioni di Internet Explorer meno di nove non garantiscono l'esecuzione di callback subito dopo l'accensione del relativo script.

• Stai attento con il DOM

  Il tuo script può essere caricato ed eseguito prima che il DOM sia pronto. Quindi, se stai manipolando il DOM, è consigliabile utilizzare un wrapper DOM ready.

• Dovresti ancora combinare dove puoi

  Solo perché stai usando un caricatore asincrono non significa che non dovresti combinare le tue risorse dove puoi.

• Limiti di caricamento asincrono di Internet Explorer

  Versioni precedenti di Internet Explorer possono caricare solo due risorse dallo stesso dominio contemporaneamente, mentre altre versioni possono caricare fino a sei. Quindi, se stai caricando più file, considera l'utilizzo di un sottodominio o CDN.

Conclusione - Pensieri su yepnope.js

Tutto sommato, ho trovato spero di essere una grande utilità! Non solo supporta il caricamento asincrono di script e fogli di stile, ma fornisce un modo semplice e pulito per caricare condizionalmente i polyfill HTML5 e CSS3. Il meccanismo di callback è ben congegnato e la possibilità di aggiungere prefissi e filtri personalizzati è semplicemente fantastica! Per quanto riguarda le prestazioni, ho scoperto che Yepnope è in qualche modo alla pari con altri programmi di caricamento, come LABjs di James Getx Solutions e jjs di James Burke. Ovviamente, ogni caricatore è diverso e si adatta ad esigenze diverse, ma se non lo hai ancora, ti incoraggio a dare yepnope.js a go!