JavaScript設計模式是指在面向對象編程中，通過對類和對象進行抽象和泛化，提取出一些通用的設計思路和解決方案，以解決常見的軟件設計問題。這些設計模式可以分為以下幾類進行詳細介紹：

一、創(chuàng)建型模式

1. 工廠模式（Factory Pattern）

• 定義：定義一個創(chuàng)建對象的接口，但讓子類決定要實例化的類是哪一個。工廠方法讓類的實例化推遲到子類中進行。
• 實現(xiàn)方式：可以通過簡單工廠、工廠方法和抽象工廠等方式進行實現(xiàn)。
  • 簡單工廠：通過一個專門的工廠類來創(chuàng)建對象，客戶端不需要知道具體的產(chǎn)品類，只需要知道產(chǎn)品類的公共接口。
  • 工廠方法：將工廠的職責分配到了具體的產(chǎn)品類中，每個具體的產(chǎn)品類都有一個對應的工廠類。
  • 抽象工廠：提供一個創(chuàng)建一系列相關或相互依賴對象的接口，而無需指定它們具體的類。
• 示例：工廠方法模式的示例代碼如下。

• // 定義產(chǎn)品接口  
  class Product {  constructor() {}  operation() {}  
  }  // 定義具體產(chǎn)品類  
  class ConcreteProductA extends Product {  constructor() { super(); }  operation() { return 'ConcreteProductA'; }  
  }  class ConcreteProductB extends Product {  constructor() { super(); }  operation() { return 'ConcreteProductB'; }  
  }  // 定義工廠接口  
  class Factory {  constructor() {}  createProduct() {}  
  }  // 定義具體工廠類  
  class ConcreteFactoryA extends Factory {  constructor() { super(); }  createProduct() { return new ConcreteProductA(); }  
  }  class ConcreteFactoryB extends Factory {  constructor() { super(); }  createProduct() { return new ConcreteProductB(); }  
  }  // 調(diào)用具體工廠  
  const factoryA = new ConcreteFactoryA();  
  const productA = factoryA.createProduct();  
  console.log(productA.operation()); // 輸出: ConcreteProductA

2. 單例模式（Singleton Pattern）

• 定義：確保一個類僅有一個實例，并提供一個全局訪問點。
• 實現(xiàn)方式：通常通過創(chuàng)建一個對象并在需要時返回這個對象的引用來實現(xiàn)。
• 示例：

• class Singleton {  static instance = null;  constructor() {  if (Singleton.instance) {  return Singleton.instance;  }  Singleton.instance = this;  // 初始化代碼  this.data = "I am the singleton instance";  }  getData() {  return this.data;  }  
  }  // 使用  
  const instance1 = new Singleton();  
  const instance2 = new Singleton();  
  console.log(instance1 === instance2); // 輸出: true  
  console.log(instance1.getData()); // 輸出: I am the singleton instance

3. 建造者模式（Builder Pattern）?

• 定義：將一個復雜對象的構建與它的表示分離，使得同樣的構建過程可以創(chuàng)建不同的表示。
• 實現(xiàn)方式：通過一個構造器或配置函數(shù)來實現(xiàn)，該函數(shù)接受多個參數(shù)來逐步構建復雜對象。
• 示例：

• // 定義一個建造者類  
  class PersonBuilder {  constructor() {  this.person = {};  }  setName(name) {  this.person.name = name;  return this;  }  setAge(age) {  this.person.age = age;  return this;  }  build() {  return this.person;  }  
  }  // 使用建造者創(chuàng)建對象  
  const personBuilder = new PersonBuilder();  
  const person = personBuilder.setName('Alice').setAge(20).build();  
  console.log(person); // { name: 'Alice', age: 20 }

  二、結構型模式

1. 原型模式（Prototype Pattern

• 定義：用原型實例指定創(chuàng)建對象的種類，并且通過拷貝這個原型來創(chuàng)建新的對象。
• 在JavaScript中的特點：由于JavaScript本身就是基于原型的語言，因此這個模式在JavaScript中非常自然。

? ? ?2.?適配器模式（Adapter Pattern）

• 定義：將一個類的接口轉換成客戶希望的另一個接口，適配器模式讓原本接口不兼容的類可以一起工作。
• 實現(xiàn)方式：可以通過函數(shù)或對象來實現(xiàn)，這些函數(shù)或對象包裝了不兼容的接口并提供一個統(tǒng)一的接口。
• 示例：

• // 定義一個不兼容的接口  
  class IncompatibleApi {  fetchData() {  console.log('Fetching data from the incompatible API.');  }  
  }  // 定義一個適配器類，將不兼容的接口轉換為兼容接口  
  class Adapter {  constructor(incompatibleApi) {  this.incompatibleApi = incompatibleApi;  }  fetch() {  this.incompatibleApi.fetchData();  }  
  }  // 使用適配器調(diào)用兼容接口  
  const incompatibleApi = new IncompatibleApi();  
  const adapter = new Adapter(incompatibleApi);  
  adapter.fetch(); // Fetching data from the incompatible API.

  3. 裝飾者模式（Decorator Pattern）?

• 定義：動態(tài)地給一個對象添加一些額外的職責，就增加功能來說，裝飾者模式相比生成子類更為靈活。
• 實現(xiàn)方式：可以通過高階函數(shù)（接收函數(shù)作為參數(shù)或返回一個函數(shù)的函數(shù)）或代理模式（Proxy）來實現(xiàn)。
• 示例：

  // 定義一個被裝飾的對象  
  class Component {  operation() {  console.log('Component');  }  
  }  // 定義一個裝飾器類，增強被裝飾的對象  
  class Decorator {  constructor(component) {  this.component = component;  }  operation() {  this.component.operation();  console.log('Decorator added new behavior.');  }  
  }  // 使用裝飾器增強被裝飾的對象  
  const component = new Component();  
  const decorator = new Decorator(component);  
  decorator.operation();

  4、代理模式（Proxy Pattern）

• 定義：為其他對象提供一種代理以控制對這個對象的訪問。
• 在JavaScript中的特點：ES6引入了Proxy對象，它允許定義基本操作的自定義行為（如屬性查找、賦值、枚舉、函數(shù)調(diào)用等）。

? ? ? 5.?模塊模式（Module Pattern）

• 定義：提供了一種封裝私有變量和函數(shù)的方法，但同時又提供了一個公共的接口來訪問這些私有成員。
• 實現(xiàn)方式：通常通過函數(shù)和閉包來實現(xiàn)。

三、行為型模式

1、觀察者模式（Observer Pattern）??

• 定義：定義對象間的一種一對多的依賴關系，當一個對象的狀態(tài)發(fā)生改變時，所有依賴于它的對象都得到通知并被自動更新。
• 實現(xiàn)方式：可以通過事件監(jiān)聽和發(fā)布/訂閱模式來實現(xiàn)。
• 示例：

  // 定義一個主題對象  
  class Subject {  constructor() {  this.observers = [];  }  addObserver(observer) {  this.observers.push(observer);  }  removeObserver(observer) {  const index = this.observers.indexOf(observer);  if (index !== -1) {  this.observers.splice(index, 1);  }  }  notify(data) {  this.observers.forEach(observer => {  observer.update(data);  });  }  
  }  // 定義一個觀察者對象  
  class Observer {  constructor(name) {  this.name = name;  }  update(data) {  console.log(`${this.name} received data: ${data}`);  }  
  }  // 使用主題對象通知觀察者對象  
  const subject = new Subject();  
  const observer1 = new Observer('Alice');  
  const observer2 = new Observer('Bob');  
  subject.addObserver(observer1);  
  subject.addObserver(observer2);  
  subject.notify('Hello world!');  
  // Alice received data: Hello world! Bob received data: Hello world!

  ?2、策略模式（Strategy Pattern）

• 定義：定義一系列的算法，把它們一個個封裝起來，并且使它們可相互替換。此模式讓算法的變化獨立于使用算法的客戶。
• 實現(xiàn)方式：可以通過函數(shù)或對象字面量來實現(xiàn)策略。
• 示例：

  // 定義一系列的算法  
  function addStrategy(a, b) {  return a + b;  
  }  function subtractStrategy(a, b) {  return a - b;  
  }  function multiplyStrategy(a, b) {  return a * b;  
  }  // 定義一個策略上下文類  
  class Context {  constructor(strategy) {  this.strategy = strategy;  }  executeStrategy(a, b) {  return this.strategy(a, b);  }  
  }  // 使用策略模式  
  const context = new Context(addStrategy);  
  console.log(context.executeStrategy(2, 3)); // 輸出 5  context.strategy = subtractStrategy;  
  console.log(context.executeStrategy(5, 2)); // 輸出 3  context.strategy = multiplyStrategy;  
  console.log(context.executeStrategy(4, 3)); // 輸出 12