Preprocessor

定義一種新的語言，再把他轉成html/css/js

更簡潔的語法

a(href='google.com') Google

<a href="google.com">Google</a>

更強大的功能-Code

- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')

更強大的功能-Mixin

mixin pet(name)
  li.pet= name
ul
  +pet('cat') // li.pet cat
  +pet('dog') // li.pet dog
  +pet('pig') // li.pet pig

更簡潔的語法

body
  font: 100% Helvetica, sans-serif
  color: #333

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

更強大的功能-Nesting

nav
  ul
    margin: 0
    padding: 0
    list-style: none
 
  li
    display: inline-block

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}

更強大的功能Variable

$font-stack: Helvetica, sans-serif
$primary-color: #333
 
body
  font: 100% $font-stack
  color: $primary-color

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

更強大的功能-Mixins

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
 
.box
  +transform(rotate(30deg))

.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

JavaScript 一直在進化，對於 preprocessor 並沒有太大的需求。
state of js

ES6 Feature - Arrow Function

// default parameter
// pass arguments
// return a + b
 
function fn (a, b)
  return a+b
 
const fn_arr = (a=1, b=1) => a + b

ES6 Feature - Arrow Function

• Arrow Function綁定this，即函數內的this是定義時所在的對象，而不是使用時所在的對象

function onClick() {console.log(this)}
document.getElementById('btn').on('click', onClick)
// result: HTML Button Element

v.s.

const onClickArrow = () => console.log(this)
document.getElementById('btn').on('click', onClickArr)
// result: Window Object

ES6 Feature - Promise

Callback Hell

doSomeAjax(url1, function(result1) {
  doSomeAjax(url2, function(result2) {
    doSomeAjax(url3, function(result3) {
      doSomeAjax(url5, function(result4) {
        doSomeAjax(url6, function(result5) {
          doSomeAjax(url7, function(result5) {
            // WTF 我現在在第幾層
            // 7嗎 不是喔
            // 而且括號少打了你有發現嗎
          });
       });
     });
  });
});

ES6 Feature - Promise

Promise

doSomeAjax('url1')
.then(() => doSomeAjax('url2'))
.then(() => doSomeAjax('url3'))
.then(() => doSomeAjax('url4'))
.then(() => doSomeAjax('url5'))
.then(() => doSomeAjax('url6'))
.then(() => doSomeAjax('url7'))

ES6 Feature - Promise

使用 Promise 物件
一個 Promise 物件處於以下幾種狀態：

• 擱置（pending）：初始狀態，不是 fulfilled 與 rejected。
• 實現（fulfilled）：表示操作成功，調用.then()裡的內容。
• 拒絕（rejected）：表示操作失敗，調用.catch()裡的內容。

ES6 Feature - Promise

• resolve(): 回傳一個實現的 promise。
• reject(): 回傳一個拒絕的 promise。

let doSomeAjax = url => new Promise((resolve, reject) => {
  if(url){
    console.log(url)
    resolve()
  }else{
    reject()
  } 
  
})
 
doSomeAjax('url1')
.then(() => doSomeAjax('url2'))
.then(() => doSomeAjax())
.catch(() => console.log('Failed'))