Charonyu's Profile

Creational 藉由創造來做

Structural 結構

Behavioral 功能

單例模式(Singleton Pattern) —-創建性模式

對一些類別來說，只有一個實體才是合理的

優點：全域都能訪問，只有這一個實體，

缺點：全域都可訪問會造成錯綜複雜，而且因為依賴同一個實體，可能會測試不易

應用：



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

Object.freeze(loader)
//因為傳址所以都會指向同一個點

export { loader }

想法：可能可以將所有loading 刪除，讓全域的loading 去做，同時也不會有那麼多loading 在跑，也不用一直創建

工廠模式(Factory Pattern) —-創建性模式

動機：根據不同條件會創建不同的實體

意圖：創建實體時，實體的創建規則由工廠來決定，創建者只需要呼叫工廠製作實體即可，不需要知道創建細節

優點：符合單一職責原則符合開放封閉原則避免創建者與產品緊密耦合

缺點：一定程度增加了系統的複雜度

應用：

Button 元件用共同接口，決定要哪個顏色，例如我要primary、secondary、success等等

想法：將button不用每個都設定顏色，而是直接決定是哪種

觀察者模式(Observer Pattern) —-行為模式

動機：當物件狀態改變也要一起更新別的物件的時候

意圖：利用訂閱來收到正在觀察物件所發生的事件

優點：符合開放封閉原則

缺點：如果觀察者與被觀察者有互相調用可能會造成問題或複查度

應用：EventListener或者react context


useEffect(() => {
    // 当组件挂载时，添加事件监听器
    window.addEventListener('resize', handleResize);

    // 当组件卸载时，移除事件监听器
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

策略模式(Strategy Pattern) —-行為模式

動機：有不同選擇

意圖：將不同邏輯各自封裝起來，並讓他們可以相互替換

優點：符合開放封閉原則，將演算法的實作細節與使用演算法的程式碼隔離

缺點：策略類別增加，一定程度增加系統複雜度

應用：

Sorting 選擇正序還是倒序

Frontend Design Patterns

單例模式(Singleton Pattern) —-創建性模式

工廠模式(Factory Pattern) —-創建性模式

觀察者模式(Observer Pattern) —-行為模式

策略模式(Strategy Pattern) —-行為模式