JavaScript的设计模式

Byron0707

于 2024-10-05 21:24:40 发布

阅读量628

点赞数 19

文章标签：设计模式

本文链接：https://blog.csdn.net/qq_29579625/article/details/142719077

版权

JavaScript设计模式是指在面向对象编程中，通过对类和对象进行抽象和泛化，提取出一些通用的设计思路和解决方案，以解决常见的软件设计问题。这些设计模式可以分为以下几类进行详细介绍：

一、创建型模式

1. 工厂模式（Factory Pattern）

定义：定义一个创建对象的接口，但让子类决定要实例化的类是哪一个。工厂方法让类的实例化推迟到子类中进行。
实现方式：可以通过简单工厂、工厂方法和抽象工厂等方式进行实现。
- 简单工厂：通过一个专门的工厂类来创建对象，客户端不需要知道具体的产品类，只需要知道产品类的公共接口。
- 工厂方法：将工厂的职责分配到了具体的产品类中，每个具体的产品类都有一个对应的工厂类。
- 抽象工厂：提供一个创建一系列相关或相互依赖对象的接口，而无需指定它们具体的类。
示例：工厂方法模式的示例代码如下。

// 定义产品接口  
class Product {  
  constructor() {}  
  operation() {}  
}  
  
// 定义具体产品类  
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(); }  
}  
  
// 调用具体工厂  
const factoryA = new ConcreteFactoryA();  
const productA = factoryA.createProduct();  
console.log(productA.operation()); // 输出: ConcreteProductA

2. 单例模式（Singleton Pattern）

定义：确保一个类仅有一个实例，并提供一个全局访问点。
实现方式：通常通过创建一个对象并在需要时返回这个对象的引用来实现。
示例：

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）

定义：将一个复杂对象的构建与它的表示分离，使得同样的构建过程可以创建不同的表示。
实现方式：通过一个构造器或配置函数来实现，该函数接受多个参数来逐步构建复杂对象。
示例：

// 定义一个建造者类  
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;  
  }  
}  
  
// 使用建造者创建对象  
const personBuilder = new PersonBuilder();  
const person = personBuilder.setName('Alice').setAge(20).build();  
console.log(person); // { name: 'Alice', age: 20 }

二、结构型模式

原型模式（Prototype Pattern

定义：用原型实例指定创建对象的种类，并且通过拷贝这个原型来创建新的对象。
在JavaScript中的特点：由于JavaScript本身就是基于原型的语言，因此这个模式在JavaScript中非常自然。

2. 适配器模式（Adapter Pattern）

定义：将一个类的接口转换成客户希望的另一个接口，适配器模式让原本接口不兼容的类可以一起工作。
实现方式：可以通过函数或对象来实现，这些函数或对象包装了不兼容的接口并提供一个统一的接口。
示例：

// 定义一个不兼容的接口  
class IncompatibleApi {  
  fetchData() {  
    console.log('Fetching data from the incompatible API.');  
  }  
}  
  
// 定义一个适配器类，将不兼容的接口转换为兼容接口  
class Adapter {  
  constructor(incompatibleApi) {  
    this.incompatibleApi = incompatibleApi;  
  }  
  fetch() {  
    this.incompatibleApi.fetchData();  
  }  
}  
  
// 使用适配器调用兼容接口  
const incompatibleApi = new IncompatibleApi();  
const adapter = new Adapter(incompatibleApi);  
adapter.fetch(); // Fetching data from the incompatible API.

3. 装饰者模式（Decorator Pattern）

定义：动态地给一个对象添加一些额外的职责，就增加功能来说，装饰者模式相比生成子类更为灵活。
实现方式：可以通过高阶函数（接收函数作为参数或返回一个函数的函数）或代理模式（Proxy）来实现。

示例：

// 定义一个被装饰的对象  
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对象，它允许定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。

5. 模块模式（Module Pattern）

定义：提供了一种封装私有变量和函数的方法，但同时又提供了一个公共的接口来访问这些私有成员。
实现方式：通常通过函数和闭包来实现。

三、行为型模式

1、观察者模式（Observer Pattern）

定义：定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。
实现方式：可以通过事件监听和发布/订阅模式来实现。

示例：

// 定义一个主题对象  
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）

定义：定义一系列的算法，把它们一个个封装起来，并且使它们可相互替换。此模式让算法的变化独立于使用算法的客户。
实现方式：可以通过函数或对象字面量来实现策略。

示例：

// 定义一系列的算法  
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