2016-04-27 18 views
77

Qual è lo scopo del seguente codice?Perché dichiarare jQuery due volte?

Si noti che prima del secondo codice di script di seguito, jquery.min.js è già incluso con googleapis.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>')</script> 
+0

Perché non caricare prima la copia locale prima di utilizzare CDN quando si è sicuri che la copia locale è quella necessaria? C'è probabilmente un piccolo vantaggio di velocità. –

+2

Sì, è principalmente il vantaggio della velocità. [Per saperne di più qui] (http://stackoverflow.com/questions/2145277/what-are-the-advantages-and-disadvantages-of-using-a-content-delivery-network-c) –

+6

E 'più veloce da caricare jQuery se già ce l'hai La migliore possibilità di averlo è quando è ospitata nello stesso posto per molti siti web. Quindi, in pratica, vuoi provarlo prima, e ottenerlo una volta per tutte. Se fallisce, prendi la versione locale. –

risposta

121

E 'di ripiego al file jquery.min.js memorizzati sullo stesso server quando il CDN è inattivo o non può essere raggiunto.

E 'essenzialmente dicendo:

// 1. Try to download and run https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js 

// 2. Was jQuery successfully loaded from the CDN? If so, it will be defined: 
if (window.jQuery) { 
    // Yes, it's defined. Good. Nothing more needed. 
} 
else { 
    // No, it's not defined. Use my copy: 
    document.write('<script src="/assets/js/vendor/jquery.min.js"><\/script>') 
} 

Read more here e si può trovare il codice originale here.

Riguardo a window.jQuery || document.write(...) che è essenzialmente una scorciatoia per il codice sopra. Se definito, window.jQuery sarà truthy e quindi l'istruzione sul lato destro di ||non verrà eseguita; tuttavia, se non è definito, sarà falsy e la dichiarazione sul lato destro di ||verrà eseguita.

+4

Fantastico concetto, non l'ho mai visto prima. Siamo sicuri che il primo

18

Sta cercando di utilizzare la versione ospitata sul CDN di Google. C'è una possibilità che la persona che visualizza il sito abbia già scritto lo script esatto in cui ha visitato un altro sito, quindi è meglio che provi prima.

Se la versione di CDN viene caricata, window.jQuery è impostato, o viene cortocircuitato e il codice si sposta.

Se la versione di CDN non può essere caricata per qualche motivo, aggiunge un altro tag di script alla pagina che punta a una versione dello script ospitata localmente.

Modifica: come indica MTCoster in a comment above, questo trucco si basa sul modo in cui JavaScript viene normalmente caricato. Il browser sospende l'esecuzione fino a quando il tag non si carica o scade. Se jQuery è stato caricato in modo asincrono utilizzando l'attributo asincrono , questo trucco non funzionerebbe.

7

Il primo script proverà a caricare jQuery da un sito Web esterno (in questo caso, Google CDN).

Il secondo tenterà di trovare l'oggetto jQuery in window e, solo se non lo trova, caricherà la libreria da un collegamento interno. È solo un ripiego nel caso in cui il CDN fallisca.

window.jQuery || document.write(...) 
// the code above means the same as the code below 
if (window.jQuery === undefined) document.write(...) 

In Javascript, oltre ai valori booleani (vero/falso), ci sono valori di verità e di falsità. Tutto ciò che è diverso da 0, false, undefined e null è un valore di verità.

In tal caso, se la proprietà jQuery esiste sulla finestra, sarà un oggetto e sarà un valore di verità, quindi la seconda istruzione non verrà eseguita (perché la prima è già vera e in un operatore OR, se una delle affermazioni è vera, salta le altre (da sinistra a destra).

Anche se la proprietà jQuery non esiste, è perché il primo script non è stato caricato correttamente e la proprietà sarà undefined, un valore di falsificazione. Quindi, verrà eseguita la seconda istruzione e la jQuery locale verrà caricata come fallback.

+0

' window.jQuery || ... 'è * non * uguale a' window.jQuery === undefined', la versione '||' restituirà ancora false se 'window.jQuery' è' 0', 'false', o' null' come hai affermato tu. –

3

Si tratta di un meccanismo di fallback se il jquery da CDN non viene raggiunto per qualche motivo, come bloccato dal firewall, CDN giù ecc

vorrei aggiungere un altro scenario di pratica ho affrontato l'anno scorso. Uno dei miei clienti ha deciso di ospitare e utilizzare l'applicazione web creata da me in LAN senza disponibilità di Internet. Con l'IIS locale l'applicazione è stata distribuita correttamente ma non è riuscita a causa della mancata disponibilità del CDN, se avessi usato il codice menzionato in questione l'app Web avrebbe funzionato per la prima volta senza alcuna modifica.

ho speranza che sia un senso ora :) Per me è stata una lezione imparata.

Problemi correlati