Preprocessor - HackMD

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 ![](https://i.imgur.com/Tv5qdIv.png) --- #### How to parcel? `$ parcel <entry>` 0 configuration