Лучший способ использовать размещенный в Google jQuery, но отказываться от моей размещенной библиотеки в Google не удается - PullRequest
Новая
       51

Лучший способ использовать размещенный в Google jQuery, но отказываться от моей размещенной библиотеки в Google не удается

1004 голосов
/ 18 июня 2009

Как можно было бы попытаться загрузить размещенный jQuery в Google (или других размещенных в Google библиотеках), но загрузить мою копию jQuery в случае неудачной попытки Google?

Я не говорю, что Google ненадежен. В некоторых случаях копия Google блокируется (например, в Иране).

Могу ли я установить таймер и проверить наличие объекта jQuery?

Какая опасность будет у обеих копий?

На самом деле не нужно искать ответы типа «просто воспользуйтесь Google» или «просто используйте свой». Я понимаю эти аргументы. Я также понимаю, что пользователь, скорее всего, будет кэшировать версию Google. Я имею в виду запасные варианты для облака в целом.

Редактировать: Эта часть добавлена ​​...

Так как Google предлагает использовать google.load для загрузки библиотек ajax, и когда это сделано, он выполняет обратный вызов, мне интересно, является ли это ключом к сериализации этой проблемы.

Я знаю, это звучит немного безумно. Я просто пытаюсь понять, можно ли это сделать надежным способом или нет.

Обновление: jQuery теперь размещен на CDN от Microsoft.

http://www.asp.net/ajax/cdn/

Ответы [ 23 ]

796 голосов
/ 18 июня 2009

Вы можете достичь этого следующим образом: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
   window.jQuery || document.write('<script src="/path/to/your/jquery"><\/script>');
</script>

Это должно быть в <head> вашей страницы, а любые обработчики событий, готовые для jQuery, должны быть в <body>, чтобы избежать ошибок (хотя это не защищает от ошибок!).

Еще одна причина, по которой не использует jQuery, размещенный в Google, заключается в том, что в некоторых странах доменное имя Google запрещено.

333 голосов
/ 22 февраля 2012

Самый простой и чистый способ сделать это на сегодняшний день: 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="path/to/your/jquery"><\/script>')</script>
75 голосов
/ 22 июня 2009

Мне кажется, это работает: 

<html>
<head>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
    $('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
    <p id="test">hello jQuery</p>
</body>
</html>

Способ работы состоит в том, чтобы использовать объект google, вызывающий http://www.google.com/jsapi, который загружается в объект window. Если этот объект отсутствует, мы предполагаем, что доступ к Google отсутствует. Если это так, мы загружаем локальную копию, используя document.write. (в этом случае я использую свой собственный сервер, для тестирования используйте свой).

Я также проверяю наличие window.google.load - я мог бы также сделать проверку typeof, чтобы увидеть, что вещи являются объектами или функциями в зависимости от ситуации. Но я думаю, что это помогает.

Вот только логика загрузки, поскольку подсветка кода, похоже, не работает, поскольку я разместил всю HTML-страницу, которую я тестировал: 

if (window.google && window.google.load) {
    google.load("jquery", "1.3.2");
} else {
    document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}

Хотя я должен сказать, что я не уверен, что, если это беспокоит посетителей вашего сайта, вы должны возиться с API библиотек Google AJAX .

Интересный факт : Сначала я пытался использовать для этого блок try..catch в разных версиях, но не смог найти комбинацию, которая была бы такой же чистой, как эта. Мне было бы интересно увидеть другие реализации этой идеи, просто в качестве упражнения.

30 голосов
/ 27 июня 2012

Если на вашем сайте есть встроенный modernizr.js, вы можете использовать встроенный yepnope.js для асинхронной загрузки ваших сценариев, в том числе jQuery (с резервным отступлением). 

Modernizr.load([{
    load : '//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'
},{
    test : window.jQuery,
    nope : 'path/to/local/jquery-1.7.2.min.js',
    both : ['myscript.js', 'another-script.js'],
    complete : function () {
        MyApp.init();
    }
}]);

Это загружает jQuery из Google-CDN. После этого проверяется, был ли jQuery успешно загружен. Если нет («нет»), загружается локальная версия. Также загружаются ваши личные скрипты - «оба» указывают, что процесс загрузки инициируется независимо от результата теста.

Когда все процессы загрузки завершены, выполняется функция, в случае «MyApp.init».

Лично я предпочитаю этот способ асинхронной загрузки скрипта. И поскольку я полагаюсь на функциональные тесты, предоставляемые modernizr при создании сайта, я все равно встраиваю его в сайт. Так что на самом деле нет накладных расходов.

21 голосов
/ 26 июня 2009

Здесь есть несколько отличных решений, но я хотел бы сделать еще один шаг в отношении локального файла.

В случае, если Google не работает, он должен загрузить локальный источник, но, возможно, физический файл на сервере не обязательно является лучшим вариантом. Я поднял этот вопрос, потому что в настоящее время я реализую то же решение, только я хочу вернуться к локальному файлу, который генерируется источником данных.

Мои причины в том, что я хочу иметь некоторый разум, когда дело доходит до отслеживания того, что я загружаю из Google, и того, что у меня есть на локальном сервере. Если я хочу изменить версии, я хочу, чтобы моя локальная копия синхронизировалась с тем, что я пытаюсь загрузить из Google. В среде, где есть много разработчиков, я думаю, что лучшим подходом было бы автоматизировать этот процесс, чтобы все, что нужно было сделать, это изменить номер версии в файле конфигурации.

Вот мое предлагаемое решение, которое должно работать теоретически:

  • В файле конфигурации приложения я буду хранить 3 вещи: абсолютный URL-адрес для библиотеки, URL-адрес для JavaScript API и номер версии
  • Напишите класс, который получает содержимое файла самой библиотеки (получает URL из конфигурации приложения), сохраняет его в моем источнике данных с именем и номером версии
  • Напишите обработчик, который извлекает мой локальный файл из БД и кэширует файл, пока не изменится номер версии.
  • Если это изменится (в конфигурации моего приложения), мой класс извлечет содержимое файла на основе номера версии, сохранит его как новую запись в моем источнике данных, затем обработчик включит и предоставит новую версию.

Теоретически, если мой код написан правильно, все, что мне нужно сделать, это изменить номер версии в конфигурации моего приложения, а затем - альт! У вас есть запасное решение, которое автоматизировано, и вам не нужно хранить физические файлы на вашем сервере.

Что все думают? Возможно, это излишне, но это может быть элегантный способ поддержки ваших библиотек AJAX.

Acorn

20 голосов
/ 28 января 2011 
if (typeof jQuery == 'undefined') {
// or if ( ! window.jQuery)
// or if ( ! 'jQuery' in window)
// or if ( ! window.hasOwnProperty('jQuery'))    

  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '/libs/jquery.js';

  var scriptHook = document.getElementsByTagName('script')[0];
  scriptHook.parentNode.insertBefore(script, scriptHook);

}

После попытки добавить копию Google из CDN.

В HTML5 вам не нужно устанавливать атрибут type.

Вы также можете использовать ... 

window.jQuery || document.write('<script src="/libs/jquery.js"><\/script>');
10 голосов
/ 12 января 2013

Возможно, вы захотите использовать локальный файл в качестве крайней меры.

Похоже, что в настоящее время собственный CDN jQuery не поддерживает https. Если это так, то вы можете сначала загрузить их оттуда.

Итак, вот последовательность: Google CDN => Microsoft CDN => Ваша локальная копия. 

<!-- load jQuery from Google's CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<!-- fallback to Microsoft's Ajax CDN -->
<script> window.jQuery || document.write('<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js">\x3C/script>')</script> 
<!-- fallback to local file -->
<script> window.jQuery || document.write('<script src="Assets/jquery-1.8.3.min.js">\x3C/script>')</script>
6 голосов
/ 21 февраля 2014

Условно загрузить последнюю / устаревшую версию jQuery и откат: 

<!--[if lt IE 9]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/public/vendor/jquery-legacy/dist/jquery.min.js">\x3C/script>')</script>
<![endif]-->
<!--[if gte IE 9]><!-->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/public/vendor/jquery/dist/jquery.min.js">\x3C/script>')</script>
<!--<![endif]-->
5 голосов
/ 19 июня 2011
  • Шаг 1. Не удалось загрузить jQuery? (отметьте jQuery переменная)

Как проверить неопределенную переменную в JavaScript

  • Шаг 2. Динамический импорт (резервная копия) файла javascript

Как включить файл JavaScript в другой файл JavaScript?

5 голосов
/ 05 июня 2011

Из-за проблемы запрета Google я предпочитаю использовать cdn от Microsoft http://www.asp.net/ajaxlibrary/cdn.ashx

Страница:
...