前言

随着前端技术的不断发展，前端框架也在不断涌现，其中的设计模式是面向对象编程中的重要概念。设计模式是解决软件工程中特定问题的经典解决方案，具有广泛的应用和实践价值，可以提高代码质量和可维护性。

本实践记录主要探讨了前端框架中的设计模式，并对比分析各种设计模式的优缺点，同时提供实际的代码示例（给出使用案例）。通过阅读本文，希望帮助读者了解前端框架中的常用设计模式，理解其原理和应用场景，从而提高前端开发的能力和水平。

设计模式的概念和分类

设计模式最早由Erich Gamma、Richard Helm、Ralph Johnson和John Vlissides等人在1994年的《Design Patterns: Elements of Reusable Object-Oriented Software》一书中提出，是指解决具有普遍性问题的可复用方案。设计模式在软件工程领域得到广泛应用，主要用于提高代码质量、可读性和可维护性。

根据设计模式的目的和作用，可以将其分为以下三类：

1、创建型模式

创建型模式用于创建对象的方式，它们封装了对象的创建过程并隐藏了创建细节，使得客户端代码可以更加简洁、可读和可扩展。创建型模式包括单例模式、工厂模式、抽象工厂模式、建造者模式和原型模式等。

2、结构型模式

结构型模式用于组合不同对象形成更大、更复杂的结构，以解决系统中各个部分之间的耦合问题。结构型模式包括适配器模式、装饰者模式、代理模式、外观模式、桥接模式、组合模式和享元模式等。

3、行为型模式

行为型模式描述了对象之间的通信方式和职责分配方式，它们可以改变系统运行时的行为，提高系统的灵活性和可扩展性。行为型模式包括观察者模式、迭代器模式、模板方法模式、策略模式、命令模式、职责链模式、状态模式和访问者模式等。

常用的设计模式及其示例

1、单例模式

单例模式是一种创建型模式，它确保一个类只有一个实例，并提供全局访问点。单例模式可以避免不必要的内存和资源使用，同时也可以方便地进行状态管理和共享数据。

优点：

只有一个实例，避免了重复创建对象。
全局访问点，方便进行状态管理和共享数据。

缺点：

违反了单一职责原则。
可能会造成全局变量的污染和不可控。

使用案例：只有一个实例的日历组件

javascript 复制代码

class Calendar {
  constructor() {
    if (!Calendar.instance) {
      this.date = new Date();
      Calendar.instance = this;
    }
    return Calendar.instance;
  }
  
  getDate() {
    return this.date.toLocaleDateString();
  }
}

const calendar1 = new Calendar();
const calendar2 = new Calendar();

console.log(calendar1 === calendar2); // true
console.log(calendar1.getDate()); // 2023-08-29
console.log(calendar2.getDate()); // 2023-08-29

2、工厂模式

工厂模式是一种创建型模式，它将对象的创建过程封装在一个工厂类中，并使用抽象工厂接口来创建具体的实例。工厂模式可以有效地降低耦合度，提高代码的灵活性和可维护性。

优点：

可以隔离具体对象的创建和使用。
通过抽象工厂接口，方便扩展和替换具体工厂类。

缺点：

增加了系统的复杂度和抽象程度。
在某些情况下可能会导致性能问题。

使用案例：不同类型的按钮组件

typescript 复制代码

class Button {    
  constructor(text) {
    this.text = text;
  }
  
  render() {
    console.log(`Rendering button: ${this.text}`);
  }
}

class SubmitButton extends Button {    
  constructor(text) {
    super(text);
  }
  
  submit() {
    console.log(`Submitting data: ${this.text}`);
  }
}

class ResetButton extends Button {    
  constructor(text) {
    super(text);
  }
  
  reset() {
    console.log(`Resetting data: ${this.text}`);
  }
}

class ButtonFactory {    
  createButton(type, text) {
    switch (type) {
      case 'submit':
        return new SubmitButton(text);
      case 'reset':
        return new ResetButton(text);
      default:
        throw new Error(`Invalid button type: ${type}`);
    }
  }
}

const buttonFactory = new ButtonFactory();
const submitButton = buttonFactory.createButton('submit', 'Submit');
const resetButton = buttonFactory.createButton('reset', 'Reset');

submitButton.render(); // Rendering button: Submit
submitButton.submit(); // Submitting data: Submit

resetButton.render(); // Rendering button: Reset
resetButton.reset(); // Resetting data: Reset

3、观察者模式

观察者模式是一种行为型模式，它定义了对象之间的一对多关系，当一个对象状态发生改变时，所有依赖于它的对象都会收到通知并自动更新。观察者模式可以实现松耦合的对象之间的交互，提高代码的可维护性和复用性。

优点：

松耦合，对象之间的依赖关系可以动态建立。
提高代码的可维护性和复用性。

缺点：

观察者过多可能会导致系统性能下降。
对象之间的交互增加了系统的复杂度。

使用案例：购物车数量的更新

scss 复制代码

class ShoppingCart {
  constructor() {
    this.items = [];
    this.subscribers = new Set();
  }
  
  addItem(item) {
    this.items.push(item);
    this.notifyAll();
  }
  
  removeItem(index) {
    this.items.splice(index, 1);
    this.notifyAll();
  }
  
  subscribe(callback) {
    this.subscribers.add(callback);
  }
  
  unsubscribe(callback) {
    this.subscribers.delete(callback);
  }
  
  notifyAll() {
    for (const subscriber of this.subscribers) {
      subscriber(this.items.length);
    }
  }
}

const shoppingCart = new ShoppingCart();

const updateCartCount = count => {
  console.log(`Updating cart count: ${count}`);
};

shoppingCart.subscribe(updateCartCount);

shoppingCart.addItem({ name: 'Product A', price: 10 });
shoppingCart.addItem({ name: 'Product B', price: 20 });
shoppingCart.removeItem(0);

shoppingCart.unsubscribe(updateCartCount);
shoppingCart.addItem({ name: 'Product C', price: 30 });

4、装饰者模式

装饰者模式是一种结构型模式，它在不改变原有对象的基础上，通过动态地为对象添加新的行为和属性，以满足具体的需求。装饰者模式可以提高代码的可扩展性和复用性，尤其适用于需要频繁扩展和调整行为的情况。

优点：

可以动态地为对象添加新的行为和属性。
可以嵌套多个装饰器，实现更加复杂的功能增强。

缺点：

可能会导致类的数量增加，增加系统的复杂度。
装饰器之间可能会产生冲突和重复。

使用案例：对文本框进行不同类型的装饰

javascript 复制代码

class TextInput {
  constructor() {
    this.value = '';
  }
  
  setValue(value) {
    this.value = value;
  }
  
  getValue() {
    return this.value;
  }
}

class InputDecorator {
  constructor(textInput) {
    this.textInput = textInput;
  }
  
  setValue(value) {
    this.textInput.setValue(value);
  }
  
  getValue() {
    return this.textInput.getValue();
  }
}

class UpperCaseInputDecorator extends InputDecorator {
  constructor(textInput) {
    super(textInput);
  }
  
  setValue(value) {
    super.setValue(value.toUpperCase());
  }
}

class TrimInputDecorator extends InputDecorator {
  constructor(textInput) {
    super(textInput);
  }
  
  setValue(value) {
    super.setValue(value.trim());
  }
}

const textInput = new TextInput();
const upperCaseTextInput = new UpperCaseInputDecorator(textInput);
const trimUpperCaseTextInput = new TrimInputDecorator(upperCaseTextInput);

trimUpperCaseTextInput.setValue('   Hello World!   ');

console.log(trimUpperCaseTextInput.getValue()); // HELLO WORLD!

5、策略模式

策略模式是一种行为型模式，它定义了一系列算法，将每个算法封装成具有尽量一致接口的独立实体，使它们可以互相替换。策略模式可以实现算法的自由组合，提高代码的灵活性和可扩展性。

优点：

算法之间的互相独立，相互替换更加方便。
算法的扩展和调整变得更加容易。

缺点：

增加了系统的复杂度和抽象程度。
由于多个策略类共用数据，可能需要对其进行同步控制。

使用案例：计算商品价格的策略模式

scala 复制代码

class PricingStrategy {
  calculatePrice(price) {
    throw new Error('Method must be implemented');
  }
}

class FixedDiscountPricingStrategy extends PricingStrategy {
  constructor(discount) {
    super();
    this.discount = discount;
  }
  
  calculatePrice(price) {
    return price - this.discount;
  }
}

class PercentageDiscountPricingStrategy extends PricingStrategy {
  constructor(discount) {
    super();
    this.discount = discount;
  }
  
  calculatePrice(price) {
    return price * (1 - this.discount / 100);
  }
}

class NoDiscountPricingStrategy extends PricingStrategy {
  calculatePrice(price) {
    return price;
  }
}

class Product {
  constructor(name, price, pricingStrategy) {
    this.name = name;
    this.price = price;
    this.pricingStrategy = pricingStrategy;
  }
  
  setPricingStrategy(pricingStrategy) {
    this.pricingStrategy = pricingStrategy;
  }
  
  getPrice() {
    return this.pricingStrategy.calculatePrice(this.price);
  }
}

const product = new Product('Product A', 100, new FixedDiscountPricingStrategy(20));

console.log(product.getPrice()); // 80

product.setPricingStrategy(new PercentageDiscountPricingStrategy(30));

console.log(product.getPrice()); // 70

product.setPricingStrategy(new NoDiscountPricingStrategy());

console.log(product.getPrice()); // 100

总结

设计模式是前端框架中的重要概念，通过使用设计模式可以提高代码质量和可维护性，增加代码的灵活性和扩展性。在实际开发中，根据具体问题和需求选择合适的设计模式，并结合多种设计模式进行组合使用，能够更好地解决复杂的开发需求。为了掌握设计模式，需要深入学习和理解设计模式的原理和应用，并进行实际的项目实践。

实践记录：详解前端框架中的设计模式 | 青训营

前言

设计模式的概念和分类

1、创建型模式

2、结构型模式

3、行为型模式

常用的设计模式及其示例

1、单例模式

2、工厂模式

3、观察者模式

4、装饰者模式

5、策略模式

相关知识点

总结