javascript - 如何在 Firefox 和 Chrome 中使用 'let'(以及支持的 ECMAScript 6 功能)

Question

使用 let 的 ES6 脚本如果在 “use strict” 定义内，则在最新的 Chrome 稳定版中按预期运行。如果使用具有特殊类型的脚本标记加载它，它在 Firefox 中运行良好:

<script type="application/javascript;version=1.7" src=""></script>

但是具有这种特殊类型的文件现在无法在 Chrome 中运行!在 Chrome 中没有脚本运行:静默失败，没有控制台消息。什么是跨浏览器解决方案？ (我想知道这是否可以在不转译的情况下完成。)

Answer 1

假设您可以控制脚本本身，最简单的解决方案是在脚本中设置一些全局变量，然后检查它是否存在。如果没有，请将此脚本元素替换为没有特殊 MIME 类型的元素，以便它可以在其他浏览器上运行。之后可以安全地忽略全局。

<script type="application/javascript;version=1.7">
  'use strict';
  window.fx = true;

  let foo = 'bar';
  console.log(foo);
</script>
<script>
  if (typeof window.fx === 'undefined') {
    var oldScript = document.querySelector('script[type="application/javascript;version=1.7"]');
    var text = oldScript.text;
    document.body.removeChild(oldScript);

    var newScript = document.createElement('script');
    newScript.text = text;
    document.body.appendChild(newScript);
  }
</script>

这里的主要缺点是引用外部脚本时可能会产生额外的 HTTP 请求，尤其是在脚本未缓存的情况下。由于 Firefox 是唯一浏览器，您可以保证在每次加载页面时不会多次请求脚本，这在其他浏览器上可能会造成极大的浪费。

作为替代方案，您可以使用注释中提到的特征检测来插入带有或不带有 type 属性的 script 元素，而不是将其包含在 HTML 中来源开始。根据MDN's compatibility table ，从 Firefox 2.0(在 JavaScript 1.7 中)开始提供基本支持，因此您可以从您希望扩展支持的任何版本中选择几乎任何 Firefox 特定的功能。

var script = document.createElement('script');
script.text = '"use strict"; let foo = "bar"; console.log(foo);';

try {
  document.querySelector('::-moz-selection');
  script.type = 'application/javascript;version=1.7';
} catch (e) {
  // Not Firefox, leave MIME type unchanged
}

document.body.appendChild(script);