Zepto откат к JQuery

Question

Я использую ZeptoJS для своего веб-приложения, но я бы хотел вернуться к jQuery, если браузер не поддерживает Zepto.Поскольку IE является единственным крупным браузером, который не поддерживается на данный момент, я испытываю желание обнаружить IE:

if(navigator.appName == 'Microsoft Internet Explorer'){
    // load jquery
} else {
    // load zepto
}

, но я бы предпочел специально определять поддержку Zepto и использовать jQuery в других случаях.Есть ли способ обнаружения функции сделать это?

Answer 1

Вы также можете использовать трюк JS, описанный здесь , чтобы определить, является ли браузер IE, и использовать современную асинхронную библиотеку загрузки скриптов для загрузки требуемой библиотеки. Yepnope пример:

yepnope({
  test: !+"\v1", // IE?
  yep: 'jquery.js',
  nope: 'zepto.js'
});

Answer 2

Вместо того, чтобы делать это с Javascript, я бы сделал шаг вперед и использовал бы условные операторы. Это может выглядеть так:

<!--[if lt IE 8 ]>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<![endif]-->

<!--[if !IE]>
    <script src="/js/zepto.js"></script>
<![endif]-->

Это относится прямо к вашим HTML-файлам. Приведенный выше фрагмент загрузит jQuery, если браузер Internet Explorer 7 и ниже. В противном случае он будет включать zepto.js.

Answer 3

Как сказано в Zepto Documentation, если вам нужно для обнаружения Internet Explorer, вы можете использовать этот код :

  if ('__proto__' in {}) {
    // IS NOT IE

  } else {
    // IS IE

  }

Zepto использует его для перехода на jQuery, но я его используюкак обнаружение браузера тоже.

Answer 4

Не используйте условные комментарии, они не будут поддерживаться IE10.Это рекомендуемый подход из документации zepto :

Загрузка Zepto в современном браузере и jQuery в IE

<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>

Zepto неработать в IE, потому что IE не поддерживает прототип , так что это абсолютно правильный способ проверки.

Приведенный выше скрипт выполняет динамическую загрузку, но логика

<script>
if ('__proto__' in {}) {
  // This is NOT IE

  } else {
    // This is IE

  }
</script>

Answer 5

Это может быть сумасшедшей идеей (я не уверен, что Zepto даже загрузится в неподдерживаемом браузере), но как насчет использования собственного определения браузера Zepto, чтобы проверить, работает ли он в неподдерживаемом браузере?1003 * Может быть, вы могли бы сделать что-то вроде этого:

var isSupported = false;
for (os in $.os) {
    if ($.os[os] == true) { isSupported = true; }
}

Это не поймает Chrome / Firefox, который отлично работает с Zepto, но он соответствует намерениям команды Zepto для вещи, которая можетне будь лучше.

Answer 6

<script>
  document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>

Это рекомендуемый метод на официальном сайте zepto.js. Смотри http://zeptojs.com/#download

Answer 7

Это старая тема, но она подошла ко мне, и я не был доволен решением в целом. Кто-то в комментарии выше упомянул, что официальный тест zepto приведет к переходу zepto на FireFix 3.6 вместо JQuery, которого я предпочел бы избежать, если это вообще возможно.

Итак, моя мысль была ... проверить, поддерживает ли она некоторую функцию HTML5 И , если это не IE. Это может означать, что больший jQuery пойдет на большее количество браузеров, чем следовало бы, но я бы предпочел «рабочий» раздутый код быстрой загрузке ничего. Итак, в любом случае, принимая метод isCanvasSupported () от Modernizer и тест __proto__, рекомендованный zepto, я думаю, что это может быть хорошим решением (у меня еще не было возможности протестировать):

   var isHtml5AndNotIE     = function() {
        var elem = document.createElement('canvas');
        return '__proto__' in {} && !!(elem.getContext && elem.getContext('2d'));
    };

Затем просто используйте этот метод в document.write (), как в приведенных выше примерах, или там, где вы определяете путь к jquery / zepto.

Единственные две версии браузера, которые я мог видеть в краткой перекрестной ссылке, которые поддерживают canvas, но не поддерживаются zepto: * IOS Safari 3.2 (4+ поддерживается Zepto) * Android 2.1 (2.2+ поддерживается Zepto)

http://zeptojs.com/#platforms

http://caniuse.com/#feat=canvas

Answer 8

Хотя многие из существующих ответов работают нормально при загрузке Zepto.js через дополнительный запрос, у меня есть ситуация, когда я знаю, что Zepto будет достаточно в большинстве случаев, и я просто хочу объединить его со своими скриптами и лениво загрузить jQuery если нужно. Я собрал небольшую обертку для Zepto, которая сделает это.

• Упаковочная машина Zepto с условной загрузкой

Он запускает «официальный» '__proto__' in ... тест и лениво загружает jQuery в случае неудачи. Если это удается, то он продолжает загружать Zepto.

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

Для оптимистического случая никаких дополнительных запросов скриптов не существует. Что касается пути jQuery, ну, в любом случае, эти пользователи точно не получили быстрый опыт.

Answer 9

Вам следует немного поднять планку, чтобы не только IE8 получал jQuery, но и другие старые браузеры. Zepto, например, требует такие функции, как Array.prototype.some.

Zepto требует практически тех же функций, что и picoQuery (альтернатива Zepto). В picoQuery они делают это так:

if (Array.isArray) {
   // Modern browser
   // (FF4+, IE9+, Safari 5+, Opera 10.5+, Konq 4.9+, Chrome 5+, etc)
   document.write("<script src='/js/zepto.min.js'></script>");
}
else {
   document.write("<script src='/js/jquery.js'></script>");
}

Из таблиц совместимости мы имеем, что любой браузер, который поддерживает Array.isArray, также поддерживает querySelectorAll (), addEventListener (), dispatchevent, Array.prototype.indexOf и Array.prototype.some - все это используется в Zepto

picoQuery описывает этот выбор здесь: http://picoquery.com/the_fallback

Answer 10

Вот как я это делаю:

<script type="text/javascript">
if(top.execScript){ // true only in IE
    document.write("<script src='/js/jquery.js'>\x3C/script>");
}
else{
    document.write("<script src='/js/zepto.min.js'>\x3C/script>");
}
</script>