如何安全使用ES6新功能?

时间:2015-05-29 12:14:34

标签: javascript ecmascript-6

有许多ES6功能看起来很像=>语法,Map对象和长等等。

老实说,由于ie8 attachEvent,我已经厌倦了检查是否支持addEventListener,我不希望那种痛苦回归到我的生活中。

那么,你会如何处理这个新的可能性? (或者你会怎么说,在一年左右的时间里)。您不会将它们用于基本操作,而是添加另一层额外功能吗?您是否只将它用于您知道将在支持它们的浏览器中运行的应用程序?你会等到至少有90%的支持吗?

我知道这些都是很棒的功能,但对于中短期使用,您似乎需要加倍代码检查和后备支持。

关于这个主题的任何启示?

编辑:请不要将此标记为重复。请注意,我不是在问如何检查支持,我问是否明智地开始使用它,或者最好等待。我还要问支持检查是否是最佳选择,不是如何做,或者在设计代码时是否还有其他方法可以解决。

2 个答案:

答案 0 :(得分:9)

tl; dr:使用 transpilers polyfills

是否应该使用新功能主要取决于您的目标环境以及您使用新功能的准确程度。例如。如果您只定位最新的浏览器版本,那么您就不会遇到问题。必须支持IE8?这可能会更困难。

一般情况下,您应该尽快开始使用新功能,并使用可以帮助您实现这一目标的工具。

有两个方面需要考虑:

  • 新API
  • 新语法构造

<强>的API

新API通常(但不总是) polyfilled 。即您包含一个库,用于检查API的某些部分是否存在,例如Map,并提供替代实施,如果它没有。

这些替代工具可能不是100%等效,也可能不像本机实现那样高效,但我说它们对所有用例都有95%的效率。

polyfills的好处在于,如果可用,您将自动使用本机浏览器实现。

<强>语法

使用新的语法结构(例如箭头函数或类)有点复杂(但不多)。最大的问题是不支持语法的浏览器甚至无法评估您的代码。您只能将代码发送到它可以实际解析的浏览器。

幸运的是,许多新的语法元素(例如箭头函数)实际上只是语法糖用于已经可能的ES5。因此,我们可以 ES6代码转换为ES5甚至ES3等效代码。

在过去的一两年里,出现了几种名为 transpilers 的工具。请注意,转换器必须在将代码发送到浏览器之前将其转换为。这意味着,您不必简单地编写JS文件并直接包含在页面中,而是需要首先转换代码的构建步骤(就像我们在其他语言中一样,如C或Java)

这与几年前我们编写JS的方式不同,但是JS社区越来越多地接受构建步骤。还有许多构建工具试图使其尽可能轻松。

与polyfills不同的一个缺点是,如果它们可用,你不会神奇地使用原生功能。因此,您可能会长时间运输已转换的版本,直到所有目标环境都支持您需要的所有功能。但是,这可能仍然比不使用新功能更好。

答案 1 :(得分:1)

您可以使用BabelJSGoogle Traceur

您必须在构建过程中包含将ES6,ES7代码转换为与当今浏览器兼容的Javascript的步骤。像gulpgrunt任务一样。 Babel列出了支持的工具here