聚會時間公告: 因應COSCUP 2011, Kalug 8月份休會一次

二月 22, 2015

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 6to5 JavaScript Transpiler 重新命名為 Babel

es6-logo

先前寫了一篇 CoffeeScript 轉 ES6,裡面有提到 6to5 專案,此專案幫助開發者可以直接寫 JavaScript ECMAScript 6,該專案則會將 ES6 轉成 ES5,但是目前瀏覽器對於 ES6 的支援度還沒有很高,可以直接參考 ECMAScript 6 compatibility table,但是看到專案名稱 6to5,就會覺得如果之後 ES7 出來,不就要多開一個 7to6 專案,果然官方在 Blog 宣佈將名稱正式轉為 BabeljsBabel 也會持續使用最新 JavaScript Standard 開發 JavaScript transpiler 相關工具,讓各種平台程式都可以使用。

現在就可以透過 Babel 來開發 ES6

$ npm install --global babel

ES6 轉 ES5

$ babel script.js

一些來自 Mozilla, Esprima, jQuery Foundation, Acorn, 6to5, ESLint 組織成員,也合力開了 ESTree,而 Babel 以 ESTree 為基底來開發相關 Tool,所以最新的 Standard 也可以直接參考 ESTree。

一月 31, 2015

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» CoffeeScript 轉 ES6

es6-logo

開始嘗試 ES6

最近有時會看看 JavaScript ECMAScript 6 的相關文件,今年也是時候將新專案用 ES6 來撰寫,在還沒使用 ES6 以前,我個人比較偏好使用 CoffeeScriptLiveScript,如果嚐試過 CoffeeScript 後,你會發現轉換成 ES6 是相當容易。網路上可以直接看 6to5 專案,提供 Sprockets, Broccoli, Browserify, Grunt, Gulp, Webpack ..等,要嘗試 ES6 語法轉成 Javascript 可以透過 ES6 repl 介面來嘗鮮。

Classes

來看看用 CoffeeScript 怎麼寫 JavaScript Class:

class Person
  constructor: (@firstName, @lastName) ->

  name: ->
    "#{@first_name} #{@last_name}"

  setName: (name) ->
    names = name.split " "

    @firstName = names[0]
    @lastName = names[1]

boy = new Person "Bo-Yi", "Wu"
boy.setName("Boy Apple")
console.log boy.name()

在 ES6 可以使用 classes, getters, and setters

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 boy = new Person("Bo-Yi", "Wu");
boy.name = "Boy Apple";
console.log(boy.name);

從上面可以發現 2 點不一樣的地方

  • 可以忽略 function 字串
  • 每個 function 後面不需要分號(;)

Interpolation

ES6 開始支援 Template String,詳細可以參考 Addy Osmani 最新寫的 Getting Literal With ES6 Template Strings

CoffeeScript:

"multi-line strings with interpolation like 1 + 1 = #{1 + 1}"

JavaScript:

"multi-line strings with interpolation like 1 + 1 = " + (1 + 1)

ES6 template strings:

// 這邊需要注意的是,兩邊並非是雙引號或單引號,而是 ` 符號
`multi-line strings with interpolation like 1 + 1 = ${1 + 1}`

注意 ES6 並非用雙引號了。所以上面的 get name function 可以改成底下

get name() {
  return `${this.firstName} ${this.lastName}`;
}

Fat Arrows

在寫 Javascript 要如何把目前的 this 綁定到現在函式內,可以透過 CoffeeScript 的 => 符號,現在 ES6 也支援了

純 JavaScript 寫法

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
});

Default arguments

CoffeeScript 可以定義函式傳入預設值

hello = (name = "guest") ->
  console.log(name)

ES6 現在也可以了

var hello = function(name = "guest") {
  alert(name);
}

Splats functions

PHP 5.6 開始也支援了 Variadic functions,而 CoffeeScript 也有此功能

PHP 5.6:

<?php
function sum(...$numbers) {
    $acc = 0;
    foreach ($numbers as $n) {
        $acc += $n;
    }
    return $acc;
}

echo sum(1, 2, 3, 4);
?>

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;
}

Destructuring

Destructuring 讓變數可以直接對應物件或陣列內容

CoffeeScript:

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

ES6:

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

我們可以將 set name 函式改成底下

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

結論

更多學習資源可以直接參考 6to5 專案,從現在開始擁抱 ES6 吧。

參考: Replace CoffeeScript with ES6

support:

biggo.com.tw

biggo.sg

A Django site.