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

五月 20, 2016

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 基礎 JavaScript ES6 和 CSS cheat sheet PDF 下載

es6-logoToptal Blog 看到 JavaScript Cheat Sheet: ES6 And Beyond 及另外一篇 A Practical CSS Cheat Sheet by Toptal Developers,這兩篇提供了一些 JavaScript ES6 及 CSS 的基礎寫法及教學,蠻適合前端工程師將 PDF 印出來貼在座位前面,cheat sheet 內提供的語法幾乎都是天天在用,像是在 ES2015 內 let vs var 語法差別,什麼時候要用 constlet,或 Template String,預設參數 .. 等功能,其實非常不賴。CSS 則是介紹基本的 Box Model、Selectors、Pseudo-selectors .. 等。

PDF 下載

在 Toptal 文章內有提供 PDF 下載連結,我也在 Google Drive 備份一次,連結如下

六月 21, 2015

小惡魔AppleBOY
AppleBOY
is about »

tag cloud

» 簡介 JavaScript ES6 物件及陣列

es6-logo

今年 2015 六月 17 號 Ecma International 已經同意 ECMA-262 6th edition 版本,這是在 ECMAScript 2015 Has Been Approved 看到的消息,而現在主流就是以 Babeljs 為主,將 ES2015 語法直接轉換成 ES5,讓各大瀏覽器可以繼續支援 ES2015 寫法。今天來介紹 ES2015 內如何使用物件 (Object) 或陣列 (Array)。

陣列 Array Destructuring

直接舉例子來說明,假設有一個 Array [1, 2, 3, 4, 5],我們需要三個變數分別對應到 1, 2, 3 這時候在 ES5 答案會是底下

var value = [1, 2, 3, 4, 5];
var el1 = value[0];
var el2 = value[1];
var el3 = value[2];

這時候可以發現 [el1, el2, el3] 就是 [1, 2, 3] 了,但是在 ES6 寫法內,可以直接宣告 Array 變數來直接對應 value

var value = [1, 2, 3, 4, 5];
var [el1, el2, el3] = value;

上述語法轉換成 ES5,就會是最上面的程式碼,ES6 可以不必宣告 el1, el2, el3 等變數,當然你也可以宣告後再做對應

var el1, el2, el3;
[el1, el2, el3] = [1, 2, 3, 4, 5];

在 ES6 內要怎麼寫 swapping values 呢,請看底下

[el1, el2] = [el2, el1];

上述結果就是將 el1 及 el2 的值互相對調。陣列裡面還可以有陣列對應

var value = [1, 2, [3, 4, 5]];
var [el1, el2, [el3, el4]] = value;

這時 el3 = 3, el4 = 4,非常簡單,如果是 function return array value 也可以直接對應

function tuple() {
  return [1, 2];
}
 
var [first, second] = tuple();

如果要跳過陣列內其中一個值,可以直接寫成底下

var value = [1, 2, 3, 4, 5];
var [el1, , el3, , el5] = value;

這時 el3 就是 3,正規語法就需要此功能

var [, firstName, lastName] = "John Doe".match(/^(w+) (w+)$/);

// firstName = John, lastName = Doe

還有在 ES5 我們常常要寫 default value 功能,現在可以用簡短程式碼取代

var [firstName = "John", lastName = "Doe"] = [];

這時候由於 firstName 跟 lastName 都是 undefined,所以可以使用預設 values,如果是 null 就會是 null 值喔

var [firstName = "John", lastName = "Doe"] = [null, null];

上述程式碼結果會是 firstName = lastName = null,最後還有 Spread operator 的功能

var value = [1, 2, 3, 4, 5];
var [el1, el2, el3, ...tail] = value;

可以發現 tail 的值會是 [4, 5],但是目前只有支援剩餘 Array 的寫法,底下寫法是不支援的

var value = [1, 2, 3, 4, 5];
var [...rest, lastElement] = value;
var [firstElement, ...rest, lastElement] = value;

物件 Object Destructuring

物件的寫法其實跟陣列沒有很大的差異,一樣是用物件包變數的方式宣告

var person = {firstName: "John", lastName: "Doe"};
var {firstName, lastName} = person;

物件內還有物件寫法

var person = {name: {firstName: "John", lastName: "Doe"}};
var {name: {firstName, lastName}} = person;

物件內有 Array 寫法

var person = {dateOfBirth: [1, 1, 1980]};
var {dateOfBirth: [day, month, year]} = person;

或者是 Array 包物件都支援

var person = [{dateOfBirth: [1, 1, 1980]}];
var [{dateOfBirth}] = person;

看看物件預設值寫法

var {firstName = "John", lastName: userLastName = "Doe"} = {};

如果是 null 跟陣列一樣都會是 null

var {firstName = "John", lastName = "Doe"} = {firstName: null, lastName: null};

函示宣告 Destructuring Function Arguments

一般開發者在寫 ES5 function 時,最後帶的參數一定會是物件 options,用來判斷此函示是否有其他特定需求變數

function findUser(userId, options) {
  if (options.includeProfile) ...
  if (options.includeHistory) ...
}

現在 ES6 可以直接寫成

function findUser(userId, {includeProfile, includeHistory}) {
  if (includeProfile) ...
  if (includeHistory) ...
}

這樣可以更清楚了解此函示的功能,而不用看程式碼了 XD,想開始嘗試寫 ES6 嗎?這時候就要強烈推薦 Babel.js 了,參考文章:Getting Started with JavaScript ES6 Destructuring

二月 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.