歡迎光臨
每天分享高質量文章

用ES6代替CoffeeScript

英文: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試一試!

赞(0)

分享創造快樂