我有一大堆JS库,我应该重写,因为它真的很旧而且已经过时了.因此,我决定提出一个解决方案,我将使用大多数ES2015功能,如 rest parameters.
问题是,我相信所有的客户都不会让他们的浏览器更新,我很困惑我是否会面临任何关于他们的浏览器兼容我的新JS库的问题.
所以,我想知道我是否可以检测客户端浏览器是否与ES2015兼容.如果没有,我会只包括我的旧JS库.
我正在寻找像Conditional comments这样的解决方案,但我无处可寻.
任何HTML,JS或PHP的帮助表示赞赏.请建议您的建议.
解决方法
I was wondering if I could detect whether the client browsers are
compatible with ES2015. And if not,I would just include my old JS
library.
你不能这样做,因为AFAIK没有完全支持ES2015的浏览器.此外,你真的不想维护你的代码的两个不同版本,因为它很痛苦,它可能会很快变得混乱.
现在的方法是使用一个转换器,它是一种编译器,可以将ES2015代码编译为ES5(每个浏览器都知道的JavaScript).它仍然有点混乱,但至少你只能编写一个版本的代码,而且它是ES2015.
我认为Babel(以前的6to5)是最受欢迎的转发器.您可以查看他们的网站以便开始使用.
至于回答你的实际问题,
How to detect if browser is compatible with ES2015
你可以通过很多方式做到这一点.我不确定什么是最可靠的,但是例如你可以试试浏览器的控制台:
'Promise' in window
如果此语句返回true,则当前浏览器支持promises,这是ES2015的新功能,因此您可以假设它支持ES2015的大多数功能.
但这对大多数情况来说还不够;您可能希望100%确定您正在使用的内容不会在任何旧浏览器中抛出SyntaxError.
解决方案可以是手动检查您要使用的每个功能.例如,如果您需要Fetch API,则可以创建一个函数来告诉您当前浏览器是否支持它:
function isFetchAPIsupported() { return 'fetch' in window; }
您可以为所需的任何新API执行此操作.但是,如果你需要语法上不同的东西,我认为你唯一的赌注是eval()(正如Katana314建议的那样).例如,为了检查对rest参数的支持,您可以执行以下操作:
function isRestSupported() { try { eval('function foo(bar,...rest) { return 1; };'); } catch (error) { return false; } return true; }
这在Firefox中很有用,因为支持其余参数.它在Safari上运行良好,返回false,因为那里还不支持rest参数.