【问题标题】:How to safely use ES6 new features?如何安全使用 ES6 新特性?
【发布时间】:2017-03-20 11:19:26
【问题描述】:

有许多看起来很棒的 ES6 功能,例如 => 语法、Map 对象和 long 等。

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

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

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

对这个话题有什么启示?

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

【问题讨论】:

标签: javascript ecmascript-6


【解决方案1】:

tl;dr: 使用 transpilerspolyfills


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

一般来说,您应该尽快开始使用新功能,并使用可以帮助您的工具。


有两个方面要看:

  • 新 API
  • 新的语法结构

API

新的 API 通常(但不总是)可以polyfill。 IE。您包含一个库来检查 API 的某些部分是否存在,例如Map,如果没有,则提供替代实现。

这些替代实现可能不是 100% 等效的,或者可能不如本机实现那样高性能,但我想说它们适用于所有用例的 95%。

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

语法

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

幸运的是,许多新的语法元素,例如箭头函数,实际上只是 语法糖,用于 ES5 已经可能实现的东西。所以我们可以将 ES6 代码转换到他们的 ES5 甚至 ES3 等价物。

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

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

一个缺点是,与 polyfill 不同,如果原生功能可用,您将不会神奇地使用它们。因此,您可能会在很长一段时间内无法交付转译版本,直到您的所有目标环境都支持您需要的所有功能。但这可能仍然比完全不使用新功能要好。

【讨论】:

  • 非常非常清晰有用的解释!我很好奇:您是否已经在使用这些功能?你能告诉我哪些吗?
  • @Vandervals:主要是箭头函数、生成器、迭代器和类。在过去的几个月里,Babel 真正确立了自己作为 转换器的地位:babeljs.io。我使用它的项目:github.com/fkling/JSNetworkX(虽然,这个有一个相当复杂的构建过程)。
  • 你太好了,我不介意问:你有没有使用 java 或其他基于类的语言的经验让你更容易跳跃? (我问这个是因为我在你的个人资料中没有看到)
  • 我在一定程度上知道 Java,但我没有积极使用它。
【解决方案2】:

您可以使用BabelJSGoogle Traceur

您必须在构建过程中包含将 ES6、ES7 代码转换为与当今浏览器兼容的 Javascript 的步骤。比如gulpgrunt 任务。 Babel 有一个支持的工具列表here

【讨论】:

  • 您想多解释一下吗?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-12-07
  • 1970-01-01
  • 1970-01-01
  • 2013-08-26
相关资源
最近更新 更多