如何在老版本浏览器中丝滑地使用JS新特性呢?
如何在老版本浏览器中丝滑地使用JS新特性呢?
有两种方法可以帮助我们实现:
第一种方法就是我们用JS原有的方法,自己去实现JS的新特性😂;
??? 不是说好的丝滑使用新特性吗,就这
哈哈哈,别急!客官留步,我还有plan B😁
咳咳咳,plan B 就是 把JS的新特性翻译成JS原有的方法😎
纳尼,这是就你的 plan B 拿我🔪来
大哥,别 别 别 !!!
我这有工具可以直接翻译,包你丝滑!不爽不要钱😭
这还差不多,先饶你一条小命,赶紧好好给大家说说怎么回事
说不明白有你好果子吃
好的,大哥我马上就说😭
plan A – 填补
先说说plan A ,用JS原有的方法,自己去实现JS的新特性叫做填补(Polyfilling),所谓填补就是在老版本的JS环境中,制造一段行为等价于新特性的代码。
例如,在低版本浏览器中填补ES6中的Number.isNaN()
的方法,该方法用来确定传递的值是不是 NaN
。同时兼容原来的isNaN()
,而不管最终用户是否在一个ES6浏览器中。
Number.isNaN = Number.isNaN || function(value) {
return typeof value === "number" && x !== x;
}
在这里我们利用了NaN
的数据类型和它不自等的特性,所以NaN
是唯一满足条件的值。
注意: 并不是所有的新特性都可以完全填补。有时一种特性的大部分行为是可以被填补,但是仍然存在一些小的偏差。
自己填补当然是好的,但更推荐你使用经受过检验的填补,比如 ES5-Shim 因为它往往更加严谨,而且大大的提高了我们的工作效率。
plan B – 转译
说完了plan A ,再来说说 plan B 把JS的新特性翻译成JS原有的方法,这个过程叫做转译(transpiling),就是字面意思,转换 + 编译,利用工具将新版本代码转换为等价的老版本代码,从而可以让新版本代码丝滑地在老版本浏览器上运行。
这里推荐两个可以使将 ES6+ 转译为 ES5的工具 – Babel 、Traceu
特别是 Babel 真的是丝滑好用,感兴趣的一定要学起来。
为什么使用JS的新特性?
最后,来聊聊为什么要使用JS的新特性(即ES6),仅仅是为了装13吗?
可能是,哈哈哈哈哈哈哈!
不开玩笑了,其实ES6比ES5更加严谨(比如:var 与 let 、const),更加简单好用(比如:箭头函数、解构赋值等等),以及提供了一些新的方法和Set、Map。ES6给我们带来了更多解决问题的选择,大大地提高了我们的工作效率,有这时间摸鱼它不香吗😁
大哥,我的方法可以吧😀
嗯,说的挺好,下次别说了
???
说了也没人点赞🙄
真的吗😥😥😥
…