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

Question

ES6脚本使用let最新Chrome稳定版中的预期运行,如果它在"use strict"定义中.如果使用特殊类型的脚本标记加载它,它在Firefox中运行正常:

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

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

Answer 1

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

\n\n

\r\n

\r\n

<script type="application/javascript;version=1.7">\r\n  \'use strict\';\r\n  window.fx = true;\r\n\r\n  let foo = \'bar\';\r\n  console.log(foo);\r\n</script>\r\n<script>\r\n  if (typeof window.fx === \'undefined\') {\r\n    var oldScript = document.querySelector(\'script[type="application/javascript;version=1.7"]\');\r\n    var text = oldScript.text;\r\n    document.body.removeChild(oldScript);\r\n\r\n    var newScript = document.createElement(\'script\');\r\n    newScript.text = text;\r\n    document.body.appendChild(newScript);\r\n  }\r\n</script>

\r\n

\r\n

\r\n

\n\n

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

\n\n

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

\n\n

\r\n

\r\n

var script = document.createElement(\'script\');\r\nscript.text = \'"use strict"; let foo = "bar"; console.log(foo);\';\r\n\r\ntry {\r\n  document.querySelector(\'::-moz-selection\');\r\n  script.type = \'application/javascript;version=1.7\';\r\n} catch (e) {\r\n  // Not Firefox, leave MIME type unchanged\r\n}\r\n\r\ndocument.body.appendChild(script);

\r\n

\r\n

\r\n

\n