owned this note
owned this note
Published
Linked with GitHub
Preprocessor
====
###### tags: `summertrain`
更快速的開發 & 更清晰的架構
---
html與css共同的問題:
語法囉嗦，需要程式的概念引入
----
定義一種新的語言，再把他轉成html/css/js
---
## HTML preprocessor
Pug, Slim, Haml
----
### 更簡潔的語法
```pug=
a(href='google.com') Google
```
```htmlmixed=
<a href="google.com">Google</a>
```
----
### 更強大的功能-Code
```pug=
- var authenticated = true
body(class=authenticated ? 'authed' : 'anon')
```
----
### 更強大的功能-Mixin
```pug=
mixin pet(name)
li.pet= name
ul
+pet('cat') // li.pet cat
+pet('dog') // li.pet dog
+pet('pig') // li.pet pig
```
---
## CSS preprocessor
sass
less
stylus
----
### 更簡潔的語法
```=
body
font: 100% Helvetica, sans-serif
color: #333
```
```css=
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
```
----
### 更強大的功能-Nesting
```=
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
```
```css=
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
```
```css=
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
```
----
### 更強大的功能-Mixins
```=
=transform($property)
-webkit-transform: $property
-ms-transform: $property
transform: $property
.box
+transform(rotate(30deg))
```
```css=
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
```
---
### Javascript preprocessor
TypeScript
CoffeeScript (死了)
LiveScript (死了)
----
JavaScript 一直在進化，對於 preprocessor 並沒有太大的需求。
[state of js](https://2018.stateofjs.com/javascript-flavors/overview/)
---
### ECMAScript
* ECMAScript 是 JavaScript 的規格
* JavaScript 是 ECMAScript 的實現
* 以前的web開發使用的Javascript為ES5
* 2015 發表 ES6
* 改善問題與新功能
---
#### ES6 Feature - let & const
```javascript=
for(let i=0;i<3;i++)
setTimeout(()=>console.log(i), 10)
```
012
222
333
---
### ES6 Feature - Destructuring
- 允許依照格式從array或object中提取值
```javascript=
let [a, b] = [1, 2]
let {c, d} = { c: 3, d: 'hello' }
/*
* a = 1
* b = 2
* c = 3
* d = 'hello'
*
* /
```
---
### ES6 Feature - Arrow Function
```javascript=
function fn () {
console.log('hello world')
}
const fn_arr = () => {
console.log('hello world')
}
```
----
### ES6 Feature - Arrow Function
```javascript=
// 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`是定義時所在的對象，而不是使用時所在的對象
```javascript=
function onClick() {console.log(this)}
document.getElementById('btn').on('click', onClick)
// result: HTML Button Element
```
v.s.
```javascript=
const onClickArrow = () => console.log(this)
document.getElementById('btn').on('click', onClickArr)
// result: Window Object
```
---
### ES6 Feature - Promise
在Promise之前，先認識callback function
```javascript=
let callback = (a) => console.log(a)
setTimeout(() => callback('a'), 1000)
setTimeout(() => {
callback('a')
setTimeout(() => {
callback('b')
}, 1000)
}, 1000)
```
----
### ES6 Feature - Promise
Callback Hell
```javascript=
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
```javascript=
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。
```javascript=
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'))
```
---
### More
* Spread operator
* RegEx Enhancement
* String Enhancement
* Array Enhancement
* Number Enhancment
* Iterator
* Generator
* Reflect
* Class
* Proxy
---
### 還沒結束，JavaScript 還在持續進化
---
### ES7, ES8, ES9
* Async , Await
* String padding
* Lifting template
* Literal restriction
* Asynchronous iterators
* Rest/Spread
---
### ES10 is coming...
* Array.flat()
* Array.flatMap()
* String.trimStart() & String.trimEnd()
* Optional Catch Binding
...
---
### Bundler
Parcel, Webpack
---
#### How to parcel?
`$ parcel <entry>`
0 configuration
Google Drive
Gist
Clipboard
Sign in with Wallet
