Откат Zepto к jQuery

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

$.os.ios      // => true if running on Apple iOS
$.os.android  // => true if running on Android
$.os.webos    // => true if running on HP/Palm WebOS
$.os.touchpad // => true if running on a HP TouchPad
$.os.version  // => string with version number, "4.0", "3.1.1", "2.1", etc.
$.os.iphone   // => true if running on iPhone
$.os.ipad     // => true if running on iPad
$.os.blackberry // => true if running on BlackBerry

Возможно, вы могли бы сделать что-то вроде этого:

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

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

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

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

Вместо того, чтобы делать это с 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.

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

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

  } else {
    // IS IE

  }

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

Не используйте условные комментарии, они не будут поддерживаться 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>

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

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

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

• Оболочка условной загрузки Zepto

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

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

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

Это старая тема, но она пришла мне в голову, и в целом я не был доволен решением. Кто-то в комментарии выше упомянул, что официальный тест 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.

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

http://zeptojs.com/#platforms

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

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

<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>

Вы должны немного поднять планку, чтобы не только 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.