Zepto fallback to jQuery

Question

我正在为我的Web应用程序使用ZeptoJS，但如果浏览器不支持Zepto，我想回退到jQuery。由于IE是目前唯一不支持的主要浏览器，因此我很想检测IE：

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

但我更愿意专门检测 Zepto 支持并在其他情况下使用 jQuery。有没有特征检测方法可以做到这一点？

Answer 1

你也可以使用这里描述的JS技巧来检测浏览器是否是IE，并使用现代异步脚本加载库来加载所需的库。耶普诺普示例：

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

这可能是一个疯狂的想法(我不确定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

Answer 7

虽然许多现有的答案在加载 Zepto 时工作正常.js通过额外的请求，但我的情况是我知道 Zepto 大部分时间就足够了，我只想将其与我的脚本合并并在需要时懒惰地加载 jQuery。我为Zepto组装了一个小包装纸，就可以做到这一点。

• Zepto 条件加载包装器

它运行"官方"'__proto__' in ...测试，如果失败，则延迟加载jQuery。如果成功，则继续加载Zepto。

我发现如果加载Zepto，IE8就会爆炸。这通过跳过模块的其余部分来解决此问题。

对于乐观情况，没有任何额外的脚本请求。对于jQuery路径，这些用户无论如何都没有获得快速体验。

Answer 8

这是一个古老的话题，但这是我想到的，我对整体解决方案不满意。 有人在上面的评论中提到，官方的zepto测试将导致zepto使用FireFix 3.6而不是JQuery，如果可能的话，我宁愿避免这种情况。

所以，我的想法是...测试以查看它是否支持某些HTML5功能，如果不是IE。 这可能意味着更大的jQuery将用于比它应该的更多的浏览器，但我更喜欢"工作"臃肿的代码，而不是快速下载任何内容。 所以，无论如何，采用 Modernizer 的 isCanvasSupported(( 方法和 zepto 推荐的__proto__测试，我认为这可能是一个很好的解决方案(还没有机会实际测试(：

   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 (Zepto 支持 4+( * Android 2.1 (Zepto 支持 2.2+(

http://zeptojs.com/#platforms

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

Answer 9

这是我这样做的方式：

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

Answer 10

你应该提高一点标准，这样不仅IE8会得到jQuery，其他旧的浏览器也会得到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