# 前端也有Design Patterns / 翁菁美 (Nina)

{%hackmd @ModernWeb/SyA2U6SmT %}

> 共筆請從這開始

## Design Pattern

Design Pattern Gof

## 瓶蓋工廠案例

### 單例模式 (Singleton pattern)
- 分類: 創建型模式
- 動機: 對於一些類別來說,只有一個實體才是合理的
- 意圖: 保證一個類別只有一個實體,並提供一個訪問他的全局訪問點
- 優點：
- 確定一個類別只有一個實體
- 該實體在全域都可以防問
- 缺點：
- 全域都可訪問，易造成錯綜復雜的關係
- 依賴同一個實體，可能會造成測試不易

範例：

export class BottleCapFactory {
    constuctor(){}
    createBottleCap(){}
}

export class TaipeiBottleCapFactory {
    constuctor(){}
    private static getIntsance(){
        return this;
    }
    getInstance(){}
    createBottleCap(){
    }
}

// how to call it?(有人能補這邊嗎？剛好像說到不能 new? )
import TaipeiBottleCapFactory from ...

let isLoading = false;
const loader = {
    show:()=>{
        isLoading = true;
        return isLoadding;
    },
    hide: () => {
        isLoading = false;
        return isLoadding;
    }
}

Object.freeze(loader);
export { loader };

Object.freeze() 靜態方法凍結物件。 凍結物件會阻止擴充功能並使現有屬性不可寫和不可配置。 凍結的物件無法再變更：無法新增屬性，無法刪除現有屬性，無法變更其可枚舉性、可配置性、可寫性或值，且無法重新指派物件的原型。 freeze() 傳回與傳入的物件相同的物件。

### 工廠模式 (Factory pattern)
- 分類: 創建型模式
- 動機: 根據條件會創建不同的實體
- 意圖: 創建實體時，實體的創建規則由工廠決定，創建者只需呼叫工廠創建實體即可，創建者不需知道創建規則細節。
- 優點：
- 符合單一職責原則
- 符合開放封閉原則
- 避免了創建者和產品之間的緊密耦合
- 缺點：
- 在一定程度上增加了系統複雜度

範例：

import {CapImageEnum} from "./capImageEnum";

export interface

import {CapImageEnum} from './capImageEnum'
import {IBottleFactory} from './'
export class ... implemnt ...

import factory from './...'
factory.createBottleCap(CapImageEnum.IMAGE_A)
factory.createBottleCap(CapImageEnum.IMAGE_B)

#### 前端應用
- UI component => 傳入不同 status

function Button({color='blue', text=''}){
    return (
        <button type='button' style={{backgroundColor: color}}>
            {text}
        </button>
    )
}

<Button color='green' text='accept' />
<Button color='gray' text='cancel' />

### 觀察者模式 (Observer pattern)
- 分類: 行為模式(Behavioral Pattern)
- 動機: 當一個物件的狀態變更也需要一起更新別的物件的時候
- 意圖: 透過訂閱來收到正在觀察的物件所發生的事件
- 優點：
- 符合開放封閉原則
- 缺點：
- 如果觀察者和被觀察者之間有互相循環調用的話，會增加系統的複雜度

範例：

export interface IBserver {
    ...
}

import { IBserver}
export class Subject {
    private oberservers: IBserver[] = [];
    public register(){}
    public unregister(){}
    public notifyAllObservers(){}
}

// 將 factory 加入監聽
factory.createBottleCap() // respones: 已建造完成

#### 前端應用
EventListener
IntersetionObserver

#### 策略模式 (Strategy pattern)
- 分類: 行為模式(Behavioral Pattern)
- 動機: 有不同的選擇
- 意圖: 將不同的邏輯各自封裝起來，並且使他們可以互相交替
- 優點：
- 符合開放封閉原則
- 將演算法的實作細節與使用該演算法的程式碼隔離
- 缺點：
- 策略類別增加，一定程度增加系統複雜度

範例：
impletment 時選擇不同組合/值

const factoryTaipei =. new BCfactory(new ProductADesignStragtegy)

factoryTaipei.createBottleCap() // image A, Small

#### 前端應用
sorting
// 但我不是很懂這個策略模式有什麼關係？

---

>聊天室
>簡報好用心，用瓶蓋工廠舉例
>不要緊張
>卡哇伊~~
>XD
>design patterns 很重要，面試時常提問用過那一些dp 但很多人都答不出來。
>~~看到 dp 會以為是 dynamic programming~~
>loadding 是 typo 嗎
>筆記已經往下模板都長好了，也太強XD

Ｑ：工廠模式是不是就像reusable component?
>正確, reusable component 就是使用工廠模式 design

Ｑ：工廠模式和 adapter pattern 差別是什麼嗎？
Ｑ：怎麼感覺工廠模式跟策略模式也很像？
缺點好像都很類似
都是增加系統複雜度ＸＤ
> 正好相反，設計模式都是為了減低系統的複雜度而衍生的

設計模式本身就是會增加複雜度吧，但這個複雜度是有公約的，所以可能會比單純不斷直線型思考寫 code 好維護一點

工廠模式、適配器模式以及策略模式都是軟體設計中為了解決特定問題而產生的模式。在學習這些模式之前，理解它們背後的設計理念和應對的問題場景是非常重要的。由於不同的問題領域可能存在一定的交集，因此在介紹時可能會給人一種它們使用上似乎很相似的錯覺。但實際上，每種模式都有其獨特的應用情境和解決問題的方式。
具體來說，工廠模式主要用於創建對象時抽象創建過程，使得客戶端不需要知道具體的實現類，只需關心所需對象的接口。適配器模式則是用來解決接口不兼容的問題，它允許將一個類的接口轉換成客戶端期待的另一種接口。策略模式是一種使得算法可以在運行時獨立於客戶端的變更，提供了管理相關的算法族的方法。
這些模式之間的差異並不總是一目瞭然，但是透過深入分析它們的結構和意圖，我們可以更精確地選擇在合適的場合使用適當的模式。在教學時，演講者應當致力於更清晰地闡述這些模式的獨特性和適用範圍，而不應該僅僅通過展示代碼來傳達它們的概念。