根據(jù)用途和分類可以將設(shè)計(jì)模式分為以下幾類：
1.創(chuàng)建模式（更好的封裝創(chuàng)建過程，標(biāo)準(zhǔn)化接口）
工廠 單例
在工廠過程中實(shí)現(xiàn)復(fù)雜的創(chuàng)建過程，暴露標(biāo)準(zhǔn)化的接口。
2.創(chuàng)建完成后，更好的組織類來變成一個(gè)更大的結(jié)構(gòu)
適配器 裝飾器
3.類和類之間的協(xié)同
觀察者， 發(fā)布訂閱，策略

創(chuàng)建型：
工廠模式-生產(chǎn)同類型的產(chǎn)品 （如支付方式注冊到工廠來創(chuàng)建實(shí)例）
建造者模式-對于已經(jīng)獨(dú)立模塊的組裝或者拆分到一起來使用（比如打包售賣皮膚和商品道具）
單例模式-唯一實(shí)例全局共享狀態(tài)和數(shù)據(jù)（如vue的狀態(tài)管理，websocket實(shí)例）

結(jié)構(gòu)型：
適配器模式-不改變原有功能，只是中間抽象出一層來進(jìn)行兼容適配（比如瀏覽器的事件管理觸發(fā)判斷，適配不同的地圖廠商來達(dá)到切換地圖的功能，重點(diǎn)不同版本的API接口適配,可以用到灰度發(fā)布上）
裝飾器模式-會在能力上進(jìn)行提升，動態(tài)的為對象添加新功能比如@log這樣的而不改變原有結(jié)構(gòu)
使用場景：
對于基礎(chǔ)組件的功能擴(kuò)展
高階組件

image.png

image.png

11

image.png

代理模式：（vue3的proxy）
引入代理對象來間接實(shí)現(xiàn)對真實(shí)對象的訪問
訪問控制： 過濾掉一些非法的請求
功能增強(qiáng)：不修改原有對象（就像委托人去辦理業(yè)務(wù)一樣），擴(kuò)展一些能力

應(yīng)用場景：
圖片預(yù)加載 虛擬代理

image.png

image.png

image.png

微前端中：代理沙箱，代理真實(shí)window 實(shí)現(xiàn)子應(yīng)用的隔離機(jī)制，防止全局污染

沙箱

image.png

行為型：高效溝通
觀察者模式
觀察者要提供注冊和取消方法，被觀察者（主題），狀態(tài)發(fā)生變化時(shí)要及時(shí)通知觀察者更新
redux主要核心方法：
訂閱subscribe,派發(fā)dispatch,獲取最新狀態(tài)getState

image.png

發(fā)布訂閱模式-1對多，依賴的訂閱者都會收到消息
解耦了發(fā)布者和訂閱者

image.png

publisher,subscriber,enventBus
publisher發(fā)布消息
subscribe接收特定消息處理

image.png

補(bǔ)充策略模式的概念：

一、策略模式概念
策略模式（Strategy Pattern） 是一種行為設(shè)計(jì)模式，它定義了一系列算法，將每個(gè)算法封裝起來，使它們可以互相替換，且算法的變化不會影響使用算法的客戶端。

核心思想
將算法從使用它的上下文中分離出來
避免使用大量的if-else或switch-case語句
提高代碼的可維護(hù)性和可擴(kuò)展性

三個(gè)主要角色
Context（上下文）：持有一個(gè)策略對象的引用
Strategy（策略接口）：定義所有支持的算法的公共接口
ConcreteStrategy（具體策略）：實(shí)現(xiàn)了策略接口的具體算法

前端應(yīng)用場景：
1. 表單驗(yàn)證策略
場景：根據(jù)不同字段類型應(yīng)用不同的驗(yàn)證規(guī)則
思路：
1.郵箱，電話，姓名等的常規(guī)校驗(yàn)實(shí)現(xiàn)自己的策略類繼承自基礎(chǔ)的策略類
2.實(shí)現(xiàn)一個(gè)抽象層的類FormValidator，負(fù)責(zé)構(gòu)造  constructor() {
    this.strategies = new Map();
  }，同時(shí)還有添加addfiled類，
具體代碼如下：
// 驗(yàn)證策略接口
class ValidationStrategy {
  validate(value) {
    throw new Error("validate() must be implemented");
  }
}

// 具體驗(yàn)證策略
class EmailValidation extends ValidationStrategy {
  validate(value) {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return {
      isValid: emailRegex.test(value),
      message: emailRegex.test(value) ? '' : '請輸入有效的郵箱地址'
    };
  }
}

class PhoneValidation extends ValidationStrategy {
  validate(value) {
    const phoneRegex = /^1[3-9]\d{9}$/;
    return {
      isValid: phoneRegex.test(value),
      message: phoneRegex.test(value) ? '' : '請輸入有效的手機(jī)號碼'
    };
  }
}

class RequiredValidation extends ValidationStrategy {
  validate(value) {
    return {
      isValid: value !== null && value !== undefined && value !== '',
      message: value ? '' : '此字段為必填項(xiàng)'
    };
  }
}

// 表單驗(yàn)證上下文
class FormValidator {
  constructor() {
    this.strategies = new Map();
  }
  
  addField(fieldName, strategy) {
    this.strategies.set(fieldName, strategy);
  }
  
  validateField(fieldName, value) {
    const strategy = this.strategies.get(fieldName);
    if (!strategy) {
      return { isValid: true, message: '' };
    }
    return strategy.validate(value);
  }
  
  validateForm(formData) {
    const results = {};
    let isValid = true;
    
    for (const [fieldName, strategy] of this.strategies) {
      const value = formData[fieldName];
      const result = strategy.validate(value);
      results[fieldName] = result;
      
      if (!result.isValid) {
        isValid = false;
      }
    }
    
    return { isValid, results };
  }
}

// 使用示例
const validator = new FormValidator();
validator.addField('username', new RequiredValidation());
validator.addField('email', new EmailValidation());
validator.addField('phone', new PhoneValidation());

const formData = {
  username: 'John',
  email: 'john@example.com',
  phone: '13800138000'
};

const validationResult = validator.validateForm(formData);
console.log(validationResult);