Zepto возврат к jQuery

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

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

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

10 ответов


это может быть сумасшедшая идея (я не уверен, что 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, и использовать современную библиотеку загрузки асинхронного скрипта для загрузки необходимого lib. 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.

Он работает в "официальный" '__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'));
    };

затем просто используйте этот метод в документе.напишите () как в примерах выше или где бы вы ни определяли путь к 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


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

<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.прототип.некоторые.

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>");
}

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

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