在Javascript(CoffeeScript)前端应用程序中,有哪些最好和最简单的方法可以通知用户他们的浏览器不受支持,而不是让用户随机点击不受支持的ES5功能时对其进行故障转移?说,我正在为现代浏览器写一些东西,我想避免在我的代码使用ES5引入的功能的任何地方,旧的浏览器会遇到无数的失败...通过阻止非兼容的ES5浏览器?
ES5引入了一些语法功能,其中一些我认为CoffeeScript依赖,我希望我的代码以某种方式避免执行开始,如果浏览器不支持ES5,而不是调整填充程序,使用Modernizr,或检查每个CoffeeScript语法子集,以确定它是如何支持的。只是ES5和一个干净的“我们很抱歉你的浏览器太旧”这个页面适用于世界其他地方。
我不希望编写测试每个ES5功能的代码,也不一定要依赖http://kangax.github.io/es5-compat-table/等合规性表来检查浏览器类型和版本(尽管如此,如果没有更好的选择,我会采用后者...)。
答案 0 :(得分:16)
这里没有神奇的解决方案。
对于每个仅限ES5的功能(其Object.*
方法或String.prototype.*
方法或新语法 - getter,setter等),您有3个选项:
try-catch
块)。为什么?
因为没有“ES5”浏览器这样的东西。
“ES5”不是可以评估的布尔值。正如你从compat中看到的那样。表,ES5是一个非常大的功能集。这些功能由不同的浏览器/平台分块,不同时间以及各种合规性实施。
当然,你总能提出一些聪明的推理测试:
var isEngineES5Compliant = 'create' in Object &&
'isArray' in Array &&
'x'[0] === 'x';
但我相信你明白它是多么脆弱。
如果浏览器支持一种方法,并且您尝试调用另一种方法 - 可能会也可能不会 - 那么,通常没有任何好处。将出现误报/否定,并且会出现失败。
你说你只是为现代浏览器而写,但你究竟如何定义现代浏览器?它是完全支持ES5 的那个吗?或者至少是您的代码使用的ES5子集?在这种情况下,您需要确切知道它是什么子集。
话虽如此,如果我们绝对必须进行推理测试以确定完整的ES5合规性,我会选择:
(function () {
"use strict";
return Function.prototype.bind && !this;
}());
这检查支持“严格模式”(实际上只是严格模式的一部分,但可能足够)并且存在Function.prototype.bind
。
这两个功能都是最后一个由浏览器实现的功能,因此我们正在研究IE10 +,Firefox 4 +,Safari 6 +,Chrome 13+和Opera 12 +。
请注意,甚至其中一些浏览器并不完全符合ES5标准(但合规性主要是obscure-ish features)。
现在,如果你想要真正的现代浏览器......那么测试ES6 features怎么样? :)
答案 1 :(得分:0)
失败"优雅" (比如显示正确的解释而不是白页或乱码),我们选择使用Dialog for Unsupported Browsers
中描述的方法删除样式和内容测试CSS动画支持和Function.prototype.bind
(在加载es5-shim之类的任何脚本之前)工作正常。请注意,如果你想在PhantomJS中测试你的东西,你需要加载该垫片
答案 2 :(得分:0)
我正在考虑使用以下try catch来测试es6的某个子集。
现在,Chrome正常运行:
try {
eval(`
'use strict';
class hello {
get hello() { return 123; }
}
`);
} catch(e) {
console.log('es6 classes are disabled :(')
}
将其翻译为es5以测试getter可能如下所示:
try {
(function() {
eval('var dfojdfoj12 = { get hello() { return 123; } }');
})();
} catch(e) {
console.log('es5 getters do not exist')
}