是时候使用ES 2015了

在Web中使用ES 2015

想要在浏览器端使用ES 2015最新语法,其实很简单,只需要一个转换器即可,Babel是ES 2015最流行的转换器之一,Babel加上各种插件和polyfill能基本上支持绝大部分新语法。

在你的构建中,插入一步使用Babel将ES 2015的代码转换成完全兼容ES5的代码的任务,你甚至都不必了解Babel的具体用法,就可以爽爽的开始写ES 2015代码了。

使用gulp-babel在需要的地方转换一下即可。

笔者在实际生产中已使用到一些ES 2015新特性,通过Babel转换成完全兼容ES5的语法,然后发布到正式环境,大大提高了开发体验。下面将一部分使用的较多,能改善编码体验的点列出来,当然也有一些坑,希望读者能尽早熟悉尽早投入ES 2015的怀抱。

最基本的:let和const

转换成

Babel只是单纯将let和const转换成了var,并没有真正实现块作用域和常量的功能,也没有消除变量提升的问题,这样避免了引入一些额外的代码,而且也已经完全与ES5兼容了。

模板字符串

转换成

模板字符串(两个反丿号)是ES 2015的一个重要的新功能,允许模板字符串里面通过${variable}的方式直接嵌变量,可以替代老旧的字符串拼接方法,而且里面可以任意使用单双引号。

这个改进很实用,现在就可以用起来了,再也不用担心单双引号谁该写在谁的外面了。

模板字符串还直接支持多行文本,如:

在拼接html的时候特别有用。

箭头函数

箭头函数语法:

转换成

箭头函数通常比匿名函数还要简洁,几乎可以取代所有使用function的地方,不过用起来别太嗨了,下面有这个坑还是值得注意。

箭头函数最大的特点在于this关键字在声明或者定义箭头函数的时候就已经被绑定好了,而且不会改变,这个特性用来解决setTimeout等一些异步函数this会改变的问题很爽,但下面这个却是个大问题:

将会转换成

看出问题了吧,相当于箭头函数是在事件监听器外面就先定义好了,这时候的this指向的全局变量,并非我们期望中的那个dom元素。

这时候就不适合用箭头函数了,除非你明确知道this指向的谁或者根本用不上this。

…args

我在前面的文章介绍过V8新的Strong Mode已经不允许使用arguments关键字了,取而代之是…args。

这里的args是个真正的数组了,使用到arguments的地方推荐都换成…args吧,还能避免一些意想不到的坑,比如下面这个。

箭头函数里面是获取不到argunents变量的,如果你这样写

将被转换成

这时候的arguments映射的是外层函数的arguments,如果使用…args就不会有这个问题。

默认参数

默认函数参数我想用处非常大了,从此再也不用写一大堆参数判断的代码了。

再也不用去费力判断哪一个参数才是callback了。 Babel已经完全支持默认参数一些强大的语法,如

对象属性缩写

转换成

属性缩写还可与解构赋值搭配使用

这样轻松就能让opt成为options的一个子集了,在做字段过滤和参数白名单过滤的时候很有用。

好了,时间已经很晚了,本期就先写到这里了。

1 收藏 评论

可能感兴趣的话题



直接登录
跳到底部
返回顶部