代码之家 › 专栏 › 技术社区 › azoundria

如果浏览器没有扩展语法(…函数中的符号)支持,如何检测/回退?

spread-syntax compatibility cross-browser function javascript

azoundria · 技术社区 · 6 年前

对于那些不知道的人来说,spread语法是将数量不确定的参数传递到函数中的一种简便方法,类似于下面的示例:

  function debug (mode, string, ...params) {
    if (debug_enabled && window.console) {
      console.log(mode+": "+string+"(",...params,");");
    }
  }

不幸的是,Internet Explorer和其他浏览器的旧版本不支持此功能。 There is more information on spread syntax and browser support here.

我没有对任何关键的东西使用spread语法,但是在网站上使用它会导致JavaScript在那些旧浏览器上完全失败。

一个选项是,我可以为旧浏览器提供一个单独版本的脚本,然后基于用户代理,将该脚本传入。但是,我希望避免这种情况,因为维护这两个文件是一件痛苦的事情,而且作为一种通用策略,如果使用其他功能,这可能会变得更加复杂。此外,还存在错误分类用户浏览器的风险。

另一个选择是找到一种方法,避免在所有功能中完全使用扩展语法。然而,这可能会增加开发时间,并创建更难理解和处理的代码。这似乎不是一个避免使用新功能的好策略,因为只有很小比例的观众无法使用它们。

我希望有人能够或知道一种聪明的方法来检测对扩展语法的支持,并在用户浏览器不支持扩展语法的情况下排除部分脚本。通过这种方式,我可以为旧浏览器上的用户提供一种仍能正常工作的体验,并且只遗漏了一些功能。我一直在网上搜索,没有找到任何代码可以这样做。我认为这可能是不可能的,因为这是一个核心语法修改,但我也找不到任何东西来完全证实这一点。

1 回复 | 直到 6 年前

CertainPerformance 5 年前

在检查浏览器是否支持spread,然后加载适当的脚本时 可能的 ,有一个更简单的选择:将Babel这样的工具集成到构建过程中,以自动将ES6+语法的代码传输到ES5。例如,如果您将以下内容插入 Babel :

function debug (mode, string, ...params) {
  if (debug_enabled && window.console) {
    console.log(mode+": "+string+"(",...params,");");
  }
}

你得到

"use strict";

function debug(mode, string) {
  if (debug_enabled && window.console) {
    var _console;

    for (var _len = arguments.length, params = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
      params[_key - 2] = arguments[_key];
    }

    (_console = console).log.apply(_console, [mode + ": " + string + "("].concat(params, [");"]));
  }
}

你可以试一试 here .

这允许您使用最新、最好的语言版本编写、读取和调试,同时仍然允许过时的浏览器理解脚本的语法。

当然,Babel不仅仅限于传输扩展语法,它还可以传输 全部的 从现代语法一直到ES5(如解构、对象扩展、求幂)( ** ),以及更多)。

尽管如此,请注意语法和新的不同 内置函数 例如 Array.prototype.includes 是ES6的一个特性,但因为它是一个新函数,而不是新语法,所以它不会被传输——为了让旧浏览器也能理解新函数,可以使用polyfills,例如, polyfill.io .

如果您真的希望能够动态确定当前客户端是否支持扩展语法,可以使用 new Function 要查看语法分析是否正确,请执行以下操作:

function supportsSpread() {
  try {
    new Function('foo(...params);');
    return true;
  } catch(e) {
    return false;
  }
}

console.log(supportsSpread());

(但真的没有什么好的理由这么做)