确认ES5支持

Confirming ES5 support

本文关键字：支持 ES5 确认      更新时间：2023-09-26

在Javascript（CoffeeScript）前端应用程序中，有什么最好和最简单的方法来通知用户他们的浏览器不受支持，而不是让它在用户随机命中不受支持的ES5功能时故障切换？比方说，我正在为现代浏览器编写一些东西，我想避免旧浏览器在我的代码使用ES5引入的功能时会遇到的无数故障。。。阻止不兼容的ES5浏览器？

ES5引入了一些语法功能，我相信CoffeeScript依赖其中的一些功能，如果浏览器不支持ES5，我希望我的代码从一开始就避免执行，而不是调整垫片、使用Modernizr或检查每个CoffeeSript语法子集，以确定它支持的向后程度。只有ES5和一个干净的"很抱歉你的浏览器太旧了"页面，适用于世界其他地方。

我不希望编写测试每个ES5功能的代码，也不一定依赖于诸如http://kangax.github.io/es5-compat-table/用于检查浏览器类型和版本（尽管，如果没有更好的替代方案，我会求助于更晚的版本…）。

这里没有神奇的解决方案。

对于每个仅限ES5的功能（无论是Object.*方法还是String.prototype.*方法，或者是新语法——getter、setter等），您都有3个选项：

  1. 填隙
  2. 在执行之前测试它是否得到支持，如果不支持则退出
  3. 让它失败（可能使用粗略的全局try-catch块）

为什么？

因为没有"ES5"浏览器这样的东西。

"ES5"不是可以计算的布尔值。正如你从同胞那里看到的。表，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标准（但这种标准主要是关于模糊的ish功能）。

现在，如果你想要真正现代浏览器。。。测试ES6功能怎么样？：）

我正在考虑使用下面的try-catch来测试es6的某个子集。

在铬现在工作：

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')
}

为了"优雅地"失败（比如显示正确的解释，而不是白色页面或混乱的混乱），我们选择使用不支持的浏览器对话框中描述的方法删除样式和内容

测试CSS动画支持和Function.prototype.bind（在加载任何脚本（如es5填充程序）之前）运行良好。注意，如果你想在PhantomJS 中测试你的东西，你需要加载这个垫片

相关文章：