<!-- HackMD dark mode style template -->
<!-- {%hackmd C-_zW0vxSXSSsOkJHknc8g %} -->
###### tags: `JS Design Pattern`
2/20 (二) Caesar
===
[創星物聯科技股份有限公司](https://www.104.com.tw/company/1a2x6bjgsv)徵才中，技術長歡迎您

簡報連結
---
....更新中

目錄
---

[TOC]

- 內心預期
- 團隊協作
- 作品展示

## 基礎技術
> 如何取得入職門票？

[frontend developer - roadmap](https://roadmap.sh/frontend)
[backend developer - roadmap](https://roadmap.sh/backend)

>基礎技術沒有學完的一天

- leetcode
- js/php/python/kotlin/ruby/rust
- ES2015/ES2021

### 那麼

- 要如何學習目前的技術
- 要如何看待目前的技術

### 三大框架差異，孰優孰劣
- vue
- angular
- react

學完之後知道個別的東西各有所長，哪些優化哪些簡化，哪些黑魔法都可以比較跟理解

### 所以

- 如何學習未來的技術
- 如何看待未來的技術
- 如何學習未來的技術
- 如何看到外來的技術

### 新的框架
> 並非很新，但尚未接觸過該項目，你會如何學習
- Svelte
- Qwik
- Elix

### 到底技術要學到什麼層面才可以呢？
> 會動就好 V.S 為何會動

太極拳只重其意，不重其招，你忘記所有招式，就練會太極拳了

---

## 建立模式

> 古典Design Patern
> 主觀來說，非物件導向(OO)愛好者

主要還是在談這些古典 Design Pattern 的物件導向層面怎麼在 JS 裡面實用，但只談 物件導向(OO) 的層面只是 JS 設計模式的冰山一角

#### Everthing is Prototype

JS 中的任何東西 create 之後就是 object，null跟undefine都是。
>methods is available inside __proto__，可以透過在瀏覽器的開發者模式查看

#### 閉包(Closure)
這樣才以從底層直接呼叫外層，從全域變數進行資料的加總，因為這樣才可以有辦法做 callback，在 scope variable 叫出回傳。若沒有closure就會變成undefine無法回傳

- Scope Variable
- Global Context
- Excution Contenxt

## 常見的設計模型

### Singleton
不會重新initial，會是一個share instance，不會重新宣告
> 所以特別在哪裡啊？為什麼需要 Singleton？

若已經有實例存在，就不再重新初始化一個實例

#### 範例

- HTTP Client Instance
各個實作層共用一個 instance，就不需要一直初始化，可以共用 config（如 axios 實例，因為很多時候，前端只需要面對一個後端伺服器）。


- SQL Client

只占用一個連線，不會佔用太多的CPU資源，

### Prototype
>主要是擁有 share function 的好處

const carPrototype = {
  startEngine() {
    console.log(`starting the engine of the ${this.year} ${this.model}!`);
  }
};

function createCar(model, year) {
  let car = Object.create(carPrototype);
  car.model = model;
  car.year = year;
  return car;
}

const myCar = createCar('Tesla', 2022);

console.log(myCar); // Inspect the car object
myCar.startEngine();


權限管理若有三個等級 admin, editor, reader，
就可以用這種方式來處理，就不用分別寫在分別三個地方。

#### 若一個東西重複三次以上，就可以做重構，不然真的會是bad smell(bad taste)

### Facade(法薩，法語念)
>所有instance的聚合

class PlumbingSystem{
setPressure(v: number){}
turnOn(){}
turnOff(){}
}
class ElectricalSystem{
setVoltage(v:number){}
turnOn(){}
turnOff(){}
}

class House {
    private plumbing = new PlumbingSystem()
    private electrical = new ElectricalSystem()


    public turnOnsystems(){
        this.electrical.setVoltage(120);
        this.electrical.turnOn()
        this.plumbing.setPressure(500)
        this.plumbing.turnOn()
    }
    public ShutDown(){
        this.plumbing.turnOff();
        this.electrical.turnOff();
    }
}

const client = new House()
client.turnOnsystems()
client.ShutDown()

以遙控器為例，就可以拆分為：「開冷氣」、「開電視」、「全開」、「全關」等等

>將許多小型模組聚合

要定義並注意要包含的功能面向，避免成為「萬能遙控器」。

如果是「購買人」這個角色，既可以買東西又可以賣東西，有錢又有背包，且一直延伸下去，就可能會造成這個 Class 寫好幾千行 code。

### Proxy

2019 之後才在 js 出現的東西，可以在用 proxy 做包裝，讓別人不會直接去對本來的物件做處理
這個的好處是可以透過 proxy 做改寫而不會直接去直接改寫物件。


最常想到的是 vue，reactive就是用 proxy 來做的

也可以使用在 cache 的實作，當作中間層來保護來源資料跟做一些儲存的任務，如 API 資料快取。


若有一些值不想給其他人所使用的話，就會這樣做這樣的東西

import {reactive} from 'vue';

const state = reactive{{ count: 0}}

### Mixin

很常被用到的**功能集合**整理成 mixin

搖尾巴、玩球、叫一聲，這些能力，不只可以用在狗狗身上，也可以用在貓身上。

class Dog {
    constructor(name){
    this.name = name
    }
}

const dogFunctionality = {
    bark: () => console.log('woof'),
    wagTail: () => console.log("wagging my tail!")
    play: () => console.log("playing")
}
Object.assign(Dog.prototype, dogFunctionality)

const pet1 = new Dog("Daisy");
pet1.name; //Daisy
pet1.bark();// Woof
pet1.play(); //Playing

我們很常用的事 lodash mixin，用 lodash 本身來做新的 mixin 動作也有新的功能可以進來，那些常見或是專屬的功能就可以這樣放置。

var _ =require('lodash');

var myMixins={
    sayHello: function() {
        console.log('Hello');
    }
}

_.mixin(myMixins);
_.sayHellow(); // Hello

擴充客製化的功能

### Flyweight

使用一個 mapping list 來記錄購物車，每一個新增購物車的時候就使用

遊戲業大概比較常見，去實作很多很小的東西來重新處理

[example](https://www.oreilly.com/library/view/learning-javascript-design/9781449334840/ch09s18.html)

### Observer

Vue 的 watch 可以視為 Observe Pattern
這東西可能不難寫，但要在哪裡實作？
有些購物車頁籤可以用session.storage也可以用observer來做實作
#### 用途
訂閱 通知 廣播 一對一 一對多的通知都可以做


若真的太麻煩，就用 rxjs 吧～


### Mediator

元件邏輯互相耦合，可以解耦，改為大家都對中間者做行為


express 的 middleware 就是這個模式，所有的處理先過中間層，再做對應的處理


const app = require("express")();

app.use(
  "/",
  (req, res, next) => {
    req.headers["test-header"] = 1234;
    next();
  },
  (req, res, next) => {
    console.log(`Request has test header: ${!!req.headers["test-header"]}`);
    next();
  }
);


前端可以使用 postal 套件

### 到底 Design Pattern 是什麼？


很多時候我們只知其實作，而不知其名。認識設計模式的名詞的過程，會帶來的好處是可以將自己原本建立的作法與設計與 Pattern 做連結，方便未來與別人交流溝通。如：這就是 Observer Pattern。

第七章只是剛開始，後面JS的pattern還有很多東西有關：
- MVC
- State Machine

了解所有招式之後，就忘記他吧，不要太在意名詞！記得就好，有印象就好

## 小結
- 當你開始造輪子的時候你才會知道做輪子的人在想什麼
- 終其一生都在 CRUD，那這些東西都沒有用處
- 如果你都是在用別人做的東西的話，那可能不會用到這些；當你開始寫底層架構時，可能才會開始想要用什麼 Pattern 比較好，要用什麼演算法...
- 如果你發現程式碼裡面，很多東西一直在重複，就可以想應該要怎麼抽象比較好