微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

用ES6代替CoffeeScript

2015-09-10 19:28 前端大全

(点击上方,可快速关注)


英文:robots.thoughtbot.com

译者:伯乐在线 - cucr

网址:http://web.jobbole.com/83330/


我一直在关注JavaScript的下一个版本ES6,而且最后有机会在一个项目中使用了它。在我使用它短暂时间内,我发现在不发生巨大语法变化的情况下,解决了很多CoffeeScript 试图解决的问题。


现在使用ES6


我们现在就可以开始使用ES6,通过 6to5项目可以将ES6代码转换成ES5。6to5能支持大量的构建工具包括Broccoli、Grunt、 Gulp和Sprockets。我使用sprockets-es6已经很成功,Sprockets 4.x将为6to5提供开箱即用的支持。


如果你使用Vim,你想将.es6文件扩展名与JavaScript关联,请将以下代码放到你的. vimrc。


你还可以使用 6to5 REPL 在您的浏览器中尝试ES6。



CoffeeScript和ES6都有类的支持。让我们看看CoffeeScript类与ES6的区别。

CoffeeScript允许我们通过参数、字符串插值(interpolation)设置实例变量,同时不使用括号调用函数:


class Person

constructor: (@firstName, @lastName) ->


name: ->

"#{@first_name} #{@last_name}"


setName: (name) ->

names = name.split " "


@firstName = names[0]

@lastName = names[1]


blake = new Person "Blake", "Williams"

blake.setName("Blake Anderson")

console.log blake.name()


在ES6中,我们可以使用class、getter和setter方法:


class Person {

constructor(firstName, lastName) {

this.firstName = firstName;

this.lastName = lastName;

}


get name() {

return this.firstName + " " + this.lastName;

}


set name(name) {

var names = name.split(" ");


this.firstName = names[0];

this.lastName = names[1];

}

}


var blake = new Person("Blake", "Williams");

blake.name = "Blake Anderson"

console.log(blake.name);


如果你在JavaScript中使用任何提供class功能的库或框架、你会注意到ES6语法有一些细微的差别:


  • 函数名后没有分号

  • 函数关键字省略了

  • 每个定义后没有逗号


我们也可以利用getter和setter的优势,它允许我们把name函数当做属性对待。


插值


我经常希望JavaScript能有一个更强大的字符串语法。幸运的是ES6引入了 模板字符串。让我们来对比CoffeeScript字符串、JavaScript字符串、模板字符串、看看每个的功能。


CoffeeScript


“CoffeeScript允许多行字符串

插值,比如1 + 1 = # { 1 + 1 }


JavaScript 字符串:


“JavaScript字符串只能在一行”+

”不支持插值”


ES6模板字符串:


`模板字符串允许字符串在

多行,允许插值,比如1 + 1 = $ { 1 + 1 }

`


我们可以在前面的示例利用模板字符串,按如下方式改写name的getter方法:


get name() {

return `${this.firstName} ${this.lastName}`;

}


这比我们之前使用的字符串拼接方式要感觉更加干净,使我们更接近CoffeeScript的例子。


大箭头(Fat arrows)


使得CoffeeScript有如此吸引力的另一个功能,也出现在ES6,即大箭头。大箭头允许我们将函数绑定到的当前this的值上。首先,让我们看看在不使用大箭头时,我们是如何处理这个问题的。


在ES5中,我们必须在定义函数保存一个对当前this值的引用:


var self = this;


$("button").on("click", function() {

// do something with self

});


CoffeeScript大箭头可以完全省略参数和括号:


$("button").on "click", =>

# do something with this


ES6大箭头需要括号,可以带或不带参数:


$("button").on("click", () => {

// do something with this

});


其它特性


ES6有一些其他特性值得关注。


默认参数


CoffeeScript:


hello = (name = "guest") ->

alert(name)


ES6:


var hello = function(name = "guest") {

alert(name);

}


Splats


Variadic functions(可变参数函数), 在CoffeeScript叫做splats。允许你以一个数组收集传递给函数附加参数。ES6中叫做rest参数。


CoffeeScript:


awards = (first, second, others...) ->

gold = first

silver = second

honorable_mention = others


ES6:


var awards = function(first, second, ...others) {

var gold = first;

var silver = second;

var honorableMention = others;

}


解构


解构允许你通过模式匹配从数组和对象提取特定的值。


CoffeeScript:


[first, _, last] = [1, 2, 3]


ES6:


var [first, , last] = [1, 2, 3]


我们可以在前面定义的name setter方法中使用解构,使代码更简洁:


set name(name) {

[this.firstName, this.lastName] = name.split(" ");

}


总结


ES6 transpilers(转换编译器)的开发非常活跃,它在功能上正迎头赶上CoffeeScript。这篇文章只涉及ES6给JavaScript带来的少数功能,你可以在这里找到更多关于本文提到的以及其它特性。


在你的下一个项目把CoffeeScript放在一边,拿ES6试一试!




前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 7个公众号帮你平衡技术与生活 南游漫记 使用 Go 进行 iOS 和 Android 编程 点“名”啦!2016 OpenPOWER 中国峰会火热开“课”中…… 绝不敢想象的10大未来科技,彻底颠覆世界