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, что может быть или не быть лучше.
Вместо того, чтобы делать это с 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 Documentation, если вам нужно обнаружить 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/
Хотя многие из существующих ответов работают нормально при загрузке 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'));
};
Затем просто используйте этот метод в document.write(), как в приведенных выше примерах или там, где вы определяете путь к jquery/zepto.
Единственные две версии браузера, которые я видел в краткой перекрестной ссылке, которые поддерживают canvas, но не поддерживаются zepto: * IOS Safari 3.2 (4+ поддерживается Zepto) * Android 2.1 (2.2+ поддерживается Zepto)
Вот как я это делаю:
<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