Pourquoi déclarer jQuery deux fois ?

Question

Quel est le but du code suivant ?

Notez que, avant le deuxième code de script ci-dessous, est déjà inclus avec .

Answer 1

C'est pour revenir à l' jquery.min.js fichier stocké sur le même serveur lorsque le CA est en panne ou ne peut pas être atteint.

C'est essentiellement en disant:

// 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>')
}

Lire plus ici, et vous pouvez trouver le code original ici.

Concernant l' window.jQuery || document.write(...) qui est essentiellement un raccourci pour le code ci-dessus. Quand définis window.jQuery sera truthy et si la déclaration sur le côté droit de l' || ne va pas être exécutée; toutefois, si elle n'est pas définie, il sera falsy et la déclaration sur le côté droit de l' || va être exécuté.

Answer 2

C'est d'essayer d'utiliser la version hébergée sur Google CDN premier. Il y a une chance que la personne qui consulte le site a déjà exact de script de mise en cache de la visite d'un autre site, de sorte qu'ils pourraient aussi bien essayer en premier.

Si la version CAN charges, fenêtre.jQuery est fixée, le ou de court-circuit, et le code se déplace sur.

Si la version CAN ne peut pas être chargé pour une raison quelconque, il ajoute une balise de script sur la page pointant vers un hébergé localement version du script.

Edit: comme MTCoster souligne dans un commentaire ci-dessus, cette astuce repose sur la façon JavaScript est normalement chargé. Le navigateur suspend l'exécution jusqu'à ce que la balise de charges ou de temps. Si jQuery ont été chargés de manière asynchrone à l'aide de la async attribut, cette astuce ne fonctionne pas.

Answer 3

Le premier script va essayer de charger jQuery à partir d'un site externe (dans ce cas, Google CA).

La seconde va essayer de trouver l'objet jQuery en window, et seulement si il ne le trouve pas, alors il va charger la bibliothèque à partir d'un lien interne. C'est seulement une solution de repli dans le cas de la CAN échoue.

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

En Javascript, en plus des valeurs booléennes (vrai/faux), il y a truthy et falsy valeurs. Tout ce qui est différent d' 0, false, undefined et null est un truthy valeur.

Dans ce cas, si l' jQuery propriété existe sur la fenêtre, il sera un objet, et il sera un truthy valeur, donc, la deuxième instruction de ne pas exécuter (parce que le premier est déjà le cas - et dans une OR de l'opérateur, si l'un des énoncés est vrai, il ignore les autres (de gauche à droite).

Bien que, si l' jQuery de la propriété n'existe pas, c'est parce que le premier script ne se charge pas correctement, et la propriété sera undefined, un falsy valeur. Donc, la deuxième instruction est exécuté, et le local jQuery sera chargé comme une solution de repli.

Answer 4

C'est un mécanisme de secours si le jquery du CDN n'est pas atteint pour une raison quelconque, comme bloqué par le pare-feu, CA vers le bas, etc

Je vais ajouter un plus pratique, le scénario que j'ai rencontrés l'année dernière. Un de mes client a décidé de l'héberger et de l'utilisation de l'application web créé par moi dans un réseau local sans accès à internet. Avec l'IIS local de l'application a été déployée correctement mais a échoué à cause de CA non disponibilité, si j'avais utilisé le code mentionné dans la question de l'application web aurait fonctionné la première fois, sans aucune modification.

J'espère qu'il aura de sens maintenant :) Pour moi, c'était une leçon apprise.