Zepto回退到jQuery

Question

我正在使用ZeptoJS作为我的网络应用程序,但如果浏览器不支持Zepto,我想回到jQuery.由于IE是目前唯一不支持的主要浏览器,我很想检测IE:

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

但我更愿意在其他情况下具体检测Zepto支持并使用jQuery.是否有一种功能检测方法可以做到这一点？

Answer 1

您还可以使用此处描述的JS技巧来检测浏览器是否为IE,并使用现代异步脚本加载库来加载所需的lib.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文件.如果浏览器是Internet Explorer 7及更低版本,上面的代码片段将加载jQuery.否则它将包括zepto.js.

Answer 3

正如Zepto Documentation所说,如果您需要检测Internet Explorer,您可以使用以下代码:

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

  } else {
    // IS IE

  }

Zepto使用它来回退jQuery,但我也将它用作浏览器检测.

Answer 4

这可能是一个疯狂的想法(我不确定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团队对该事物的意图,这可能会或可能不会更好.

Answer 5

不要使用条件注释,它不会被IE10支持.这是zepto文档中推荐的方法:

在现代浏览器上加载Zepto,在IE上加载jQuery

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

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

这是zepto.js官方网站上推荐的方法.请参见http://zeptojs.com/#download