Javascript Zepto 回退到 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8725905/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Zepto fallback to jQuery
提问by jos3000
I'm using ZeptoJS for my web app, but I'd like to fall back to jQuery if the browser doesn't support Zepto. Since IE is the only major browser not supported at the moment, I'm tempted to detect IE:
我正在将 ZeptoJS 用于我的 Web 应用程序，但如果浏览器不支持 Zepto，我想回退到 jQuery。由于 IE 是目前唯一不受支持的主要浏览器，因此我很想检测 IE：
if(navigator.appName == 'Microsoft Internet Explorer'){
// load jquery
} else {
// load zepto
}
but I'd prefer to specificly detect Zepto support and use jQuery in other cases. Is there a feature detection way to do this?
但我更喜欢专门检测 Zepto 支持并在其他情况下使用 jQuery。有没有特征检测方法来做到这一点？
采纳答案by SimplGy
This might be a crazy idea (I'm not sure if Zepto will even load on an unsupported browser), but what about using Zepto's own browser detection to see if it's on an unsupported browser?
这可能是一个疯狂的想法（我不确定 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
Maybe you could do something like this:
也许你可以这样做：
var isSupported = false;
for (os in $.os) {
if ($.os[os] == true) { isSupported = true; }
}
This won't catch chrome/firefox, which work fine with Zepto, but it does match the Zepto team's intentions for the thing, which may or may not be better.
这不会捕获 chrome/firefox，它与 Zepto 一起工作得很好，但它确实符合 Zepto 团队的意图，这可能会更好，也可能不会更好。
回答by phil pirozhkov
回答by jAndy
Rather than doing that with Javascript, I'd take it one step ahead and use conditional statements. This could look like:
与其用 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]-->
This goes right into your HTML files. The above snippet will load jQuery, if the browser is Internet Explorer 7 and below. Otherwise it'll include zepto.js.
这直接进入您的 HTML 文件。如果浏览器是 Internet Explorer 7 及更低版本，则上述代码段将加载 jQuery。否则它将包含 zepto.js。
回答by Jaime Fernandez
As Zepto Documentation said, if you need to detect Internet Explorer you can use this code:
正如 Zepto 文档所说，如果您需要检测 Internet Explorer，您可以使用以下代码：
if ('__proto__' in {}) {
// IS NOT IE
} else {
// IS IE
}
Zepto use it to fall back on jQuery, but I have use it as browser detection too.
Zepto 使用它来依赖 jQuery，但我也将它用作浏览器检测。
回答by gagarine
Don't use the conditional comments, it's not going to be supported by IE10. This is the recommended approach from the zepto documentation:
不要使用条件注释，IE10 将不支持它。这是zepto 文档中推荐的方法：
Load Zepto on modern browser and jQuery on IE
在现代浏览器上加载 Zepto，在 IE 上加载 jQuery
<script>
document.write('<script src=' +
('__proto__' in {} ? 'zepto' : 'jquery') +
'.js><\/script>')
</script>
Zepto doesn't work in IE because IE doesn't support prototype, so this is exactly the right way to check.
Zepto 在 IE 中不起作用，因为 IE 不支持原型，所以这正是检查的正确方法。
The script above do a dynamical load but the logic is
上面的脚本进行动态加载，但逻辑是
<script>
if ('__proto__' in {}) {
// This is NOT IE
} else {
// This is IE
}
</script>
回答by Ale
<script>
document.write('<script src=' + ('__proto__' in {} ? 'zepto' : 'jquery') + '.js><\/script>')
</script>
This is the recommended method on zepto.js official site. See http://zeptojs.com/#download
这是 zepto.js 官网推荐的方法。见http://zeptojs.com/#download
回答by mckamey
While many of the existing answers work fine when loading Zepto.js via an additional request, I have a situation where I know Zepto will suffice most of the time and I just want to merge it in with my scripts and lazily load jQuery if needed. I put together a small wrapper for Zepto will do just that.
虽然在通过附加请求加载 Zepto.js 时，许多现有答案都可以正常工作，但我有一种情况，我知道 Zepto 大部分时间都足够用，我只想将它与我的脚本合并，并在需要时延迟加载 jQuery。我为 Zepto 组装了一个小包装器就可以做到这一点。
It runs the "offical" '__proto__' in ...testand lazy loads jQuery if it fails. If it succeeds, then it continues loading Zepto.
如果失败，它会运行“官方”'__proto__' in ...测试并延迟加载 jQuery。如果成功，则继续加载 Zepto。
I found that IE8 would blow up if Zepto was even loaded. This fixes that by skipping the rest of the module.
我发现即使加载了 Zepto，IE8 也会爆炸。这通过跳过模块的其余部分来解决这个问题。
For the optimistic case, there isn't any additional script requests. For the jQuery path, well, those users weren't exactly getting the fast experience anyway.
对于乐观的情况，没有任何额外的脚本请求。对于 jQuery 路径，无论如何，这些用户并没有完全获得快速体验。
回答by Kevin Nelson
This is an old topic, but it's what came up for me, and I was not happy with the solution overall. Someone in a comment above mentioned that the official zepto test will result in zepto going to FireFix 3.6 instead of JQuery, which I would prefer to avoid if at all possible.
这是一个古老的话题，但它是我想到的，我对整个解决方案并不满意。有人在上面的评论中提到官方 zepto 测试将导致 zepto 转到 FireFix 3.6 而不是 JQuery，如果可能的话，我宁愿避免这种情况。
So, my thought was...test to see if it supports some HTML5 feature ANDif it's not IE. This may mean that the larger jQuery will go to more browsers than it should, but I would prefer "working" bloated code to a quick download of nothing. So, anyway, taking the isCanvasSupported() method from Modernizer and the __proto__test recommended by zepto, I'm thinking this might be a good solution (haven't had a chance to actually test yet):
所以，我的想法是...去看看测试它是否支持HTML5的一些特征和，如果它不是IE浏览器。这可能意味着更大的 jQuery 将比它应该进入更多的浏览器，但我更喜欢“工作”膨胀的代码而不是快速下载任何东西。所以，无论如何，采用 Modernizer 的 isCanvasSupported() 方法和__proto__zepto 推荐的测试，我认为这可能是一个很好的解决方案（还没有机会实际测试）：
var isHtml5AndNotIE = function() {
var elem = document.createElement('canvas');
return '__proto__' in {} && !!(elem.getContext && elem.getContext('2d'));
};
Then, just use that method in the document.write() as in the examples above or wherever you are defining the path to jquery/zepto.
然后，只需在上面的示例中或在定义 jquery/zepto 路径的任何地方使用 document.write() 中的方法。
The only two browser versions that I could see in a quick cross-reference that support canvas but aren't supported by zepto are: * IOS Safari 3.2 (4+ is supported by Zepto) * Android 2.1 (2.2+ is supported by Zepto)
我在快速交叉参考中看到的仅有两个支持画布但不受 zepto 支持的浏览器版本是： * IOS Safari 3.2（Zepto 支持 4+） * Android 2.1（Zepto 支持 2.2+）
回答by rosell.dk
You should raise the bar a bit so not only IE8 will get jQuery, but also other older browsers. Zepto for example requires features such as Array.prototype.some.
您应该稍微提高一下标准，这样不仅 IE8 将获得 jQuery，而且其他较旧的浏览器也将获得支持。例如，Zepto 需要诸如 Array.prototype.some 之类的功能。
Zepto requires much the same features as picoQuery(which is an alternative to Zepto). In picoQuery, they do like this:
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>");
}
From compatibility tables we have that any browser that supports Array.isArray also supports querySelectorAll(), addEventListener(), dispatchevent, Array.prototype.indexOf and Array.prototype.some - all which are used in Zepto
从兼容性表中可以看出，任何支持 Array.isArray 的浏览器也支持 querySelectorAll()、addEventListener()、dispatchevent、Array.prototype.indexOf 和 Array.prototype.some - 所有这些都在 Zepto 中使用
picoQuery describes this choice here: http://picoquery.com/the_fallback
picoQuery 在这里描述了这个选择：http://picoquery.com/the_fallback
回答by Timbo White
This is the way I do it:
这是我这样做的方式：
<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>
