Zepto 回退到 jQuery

Question

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

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

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

Answer 1

您还可以使用此处 检测浏览器是否为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 文档所述，如果您需要检测 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 不支持 prototype，因此这正是正确的检查方法。

上面的脚本执行动态加载，但逻辑是

<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 路径的任何地方。

我在快速交叉引用中看到的唯一两个支持 canvas 但 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 和 A​​rray.prototype.some - 所有这些都用于Zepto

picoQuery 在这里描述了这个选择：
http://picoquery.com/the_fallback