背景
在 Babel 等转译工具的帮助下,我们可以在项目中使用所有的 ES6+ 的语言特性,但是我们最终交付的代码仍旧需要转译成 ES5 代码以兼容旧浏览器。现在所有的现代浏览器都已经很好地支持了 ES6+ 的语言特性,为了那很小的一部分旧浏览器,我们却不得不强迫所有的现代浏览器运行转译后的冗长、执行效率低下的 ES5 代码。为了更好的用户体验,作为开发者我们有责任去解决这个问题。
1 特性检查
对于 JS 和 DOM 新的 API,我们在不确定浏览器是否支持的情况下,最常采取的方式是在代码运行的时候进行特性检查。例如:
if(browserSupportsNewFeature){
// 使用新特性
} else {
// 使用替代方式或者引入Pollyfill
}
这种特性检测方式对于检测 JS 或 DOM 的新 API 比较有效,但是 JS 中的新语法的检查就很棘手了。JS 的解析器一旦不能识别某个语法,将直接抛出语法错误,所有的代码将没法儿执行。例如 let 声明,箭头函数。
虽然目前没有特别好的针对新语法的特性检查方式,不过目前有一种方式可以检查浏览器支持的 ES6 的语法。具体的的方式是:
<script type="module">
大多数同学可能知道 <script type