2016-04-27 4 views
77

Какова цель следующего кода?Зачем объявлять jQuery дважды?

Обратите внимание, что перед вторым кодом кода ниже jquery.min.js уже включен в комплект 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

Почему бы не загрузить локальную копию сначала, прежде чем использовать CDN, если вы уверены, что локальная копия вам нужна? Вероятно, есть небольшое преимущество в скорости. –

+2

Да, это в основном преимущество скорости. [Подробнее здесь] (http://stackoverflow.com/questions/2145277/what-are-the-advantages-and-disadvantages-of-using-a-content-delivery-network-c) –

+6

Быстрее загружать jquery если у вас уже есть. Лучший шанс иметь это, когда он размещен в одном месте для многих сайтов. Итак, в основном, вы хотите попробовать это первым и получить его раз и навсегда. Если это не удается, получите локальную версию. –

ответ

121

Это в Откат к jquery.min.js файла, хранящегося на том же сервере, когда CDN вниз или не может быть достигнута.

Это по сути говоря:

// 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 и вы можете найти исходный код here.

Что касается window.jQuery || document.write(...), это по существу сокращение от приведенного выше кода. Когда определено window.jQuery будет truthy, и поэтому утверждение с правой стороны от ||не будет выполнено; однако, если он не определен, это будет falsy, а справку с правой стороны от ||будет исполнено.

+4

Прохладная концепция, я никогда раньше этого не видел. Мы гарантируем, что первый

18

Сначала он использует версию, размещенную на CDN компании Google. Есть вероятность, что у человека, просматривающего сайт, есть тот точный сценарий, который кэшируется из посещения какого-либо другого сайта, поэтому они могут сначала попробовать это.

Если версия CDN загружена, устанавливается окно.jQuery, код короткого замыкания, код , и код перемещается.

Если версия CDN не может быть загружена по какой-либо причине, она добавляет еще один тег скрипта на страницу, указывающую на локальную версию сценария.

Редактировать: как указывает MTCoster в a comment above, этот трюк зависит от способа загрузки JavaScript. Браузер приостанавливает выполнение, пока тег не загрузится или не истечет время ожидания. Если jQuery были загружены асинхронно, используя атрибут async , этот трюк не сработает.

7

Первый скрипт попытается загрузить jQuery с внешнего веб-сайта (в данном случае, Google CDN).

Второй попытается найти объект jQuery в window, и только если он его не найдет, он загрузит библиотеку из внутренней ссылки. Это всего лишь резерв в случае сбоя CDN.

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

В Javascript, кроме булевы (истина/ложь), есть truthy и falsy значения. Все, что отличается от 0, false, undefined и null - это правдивое значение.

В этом случае, если свойство jQuery существует в окне, это будет объект, и это будет правное значение, поэтому второй оператор не будет выполняться (поскольку первый из них уже является истинным) и в оператор OR, если какое-либо из утверждений верно, оно пропускает другие (слева направо).

Хотя, если свойство jQuery не существует, это связано с тем, что первый скрипт не загрузился правильно, а свойство будет undefined, значение фальши. Таким образом, будет выполняться второй оператор, и локальный jQuery будет загружен как резерв.

+0

' window.jQuery || ... 'is * not * то же, что и' window.jQuery === undefined', '||' версия все равно вернет false, если 'window.jQuery'' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' как вы заявили. –

3

Это резервный механизм, если JQuery из CDN не дотянулся до какой-то причине, как блокируется брандмауэром, CDN вниз и т.д.

я добавлю еще один практический сценарий я столкнулся в прошлом году. Один из моих клиентов решил разместить и использовать веб-приложение, созданное мной в локальной сети, без доступа в Интернет. В локальном IIS приложение было развернуто правильно, но не выполнено из-за недоступности CDN, если бы я использовал упомянутый код, веб-приложение работало бы в первый раз без каких-либо изменений.

Надеюсь, что это будет иметь смысл сейчас :) Для меня это был извлеченный урок.

Смежные вопросы