前端框架中的设计模式

介绍

设计模式是对一些常见问题进行归纳总结，并针对具体问题给出一套通用的解决办法。前端框架中的设计模式广泛应用于组件化开发、状态管理、数据流控制等方面，以提高代码的可维护性、可扩展性和重用性。

前端框架中常见的设计模式

创建型模式

工厂模式

介绍：工厂模式，它是一种创建型的设计模式，由它的类型就能知道，它是一种创建对象的方式，在工厂模式中，一个工厂类用于创建具有共同结构的对象实例，无需指定它们的具体类

实例：

 class BaseComponent {
        constructor(props) {
            this.props = props;
        }
       render() {
        // 渲染逻辑
      }
    }
    // 创建一个组件工厂
class ComponentFactory {
  static createComponent(type, props) {
    switch (type) {
      case 'button':
        return new ButtonComponent(props);
      case 'input':
        return new InputComponent(props);
      // 可以添加更多组件类型
      default:
        throw new Error('Unknown component type');
    }
  }
}

// 具体的组件类
class ButtonComponent extends BaseComponent {
  render() {
    // 具体的渲染逻辑
    console.log('Rendering a button with props:', this.props);
  }
}

class InputComponent extends BaseComponent {
  render() {
    // 具体的渲染逻辑
    console.log('Rendering an input with props:', this.props);
  }
}

// 使用组件工厂创建组件
const buttonProps = { label: 'Click Me' };
const button = ComponentFactory.createComponent('button', buttonProps);
button.render();
         

我的理解是就好比修一个房子，先用工厂搭一个架子，然后想怎么装修往里添就行了，

优缺点

优点： 降低了客户端具体产品类之间的耦合度，没有什么约束了，使代码更加灵活 缺点：使系统更复杂了，如果产品类过多，会导致工厂类过于庞大

单列模式

介绍： ：单例模式确保一个类只有一个实例，并提供一个全局访问点。它适用于那些需要控制实例数量的场景，如全局状态管理器、全局配置对象等。 使用场景：uex或Redux等状态管理库中，可以使用单例模式来管理全局状态

实例

    class Singleton {
      constructor() {
        if (Singleton.instance) {
          return Singleton.instance;
        }
        Singleton.instance = this;
        // 初始化代码
      }

      someMethod() {
        console.log('Singleton method called');
      }
    }

    const singleton1 = new Singleton();
    const singleton2 = new Singleton();

    console.log(singleton1 === singleton2); // true
    singleton1.someMethod(); 

优缺点：

优点：保证了系统中只有一个实例，节省了资源，提高了性能 缺点：不适用于多线程环境，可能导致资源竞争和数据不一致

结构型模式

适配器模式

介绍：适配器模式将一个类的接口转换成客户希望的另外一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。

使用场景

通过适配器模式将不同数据源返回的数据格式统一成统一格式。

实例：

   class Target {
  request() {
    console.log('Called Target request');
  }
}

class Adaptee {
  specificRequest() {
    console.log('Called Adaptee specificRequest');
  }
}

class Adapter extends Target {
  constructor(adaptee) {
    super();
    this.adaptee = adaptee;
  }

  request() {
    this.adaptee.specificRequest();
  }
}

const adaptee = new Adaptee();
const adapter = new Adapter(adaptee);
adapter.request(); // Called Adaptee specificRequest

优缺点

优点：提高了系统的灵活性和可扩展性，使得不同的系统或组件能够协同工作 缺点：增加了系统的复杂性，需要额外的适配器类。

行为型模式

观察者模式

介绍

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时，会通知所有观察者对象，使它们能够自动更新

使用场景

在Vue或React框架中，可以使用观察者模式来实现事件监听和数据更新通知。（比如滚动条滚动）

实例

        class Subject {
      constructor() {
        this.observers = [];
      }

      addObserver(observer) {
        this.observers.push(observer);
      }

      removeObserver(observer) {
        this.observers = this.observers.filter(obs => obs !== observer);
      }

      notifyObservers() {
        this.observers.forEach(observer => observer.update());
      }

      someStateChange() {
        console.log('State has changed');
        this.notifyObservers();
      }
    }

    class Observer {
      update() {
        console.log('Observer has been notified');
      }
    }

    const subject = new Subject();
    const observer1 = new Observer();
    const observer2 = new Observer();

    subject.addObserver(observer1);
    subject.addObserver(observer2);

    subject.someStateChange();
    

优缺点

优点：实现了对象之间的解耦，提高了系统的灵活性和可扩展性 缺点：如果观察者数量过多，可能会导致性能问题。

小结

前端框架中的设计模式有助于提高代码的可维护性、可扩展性和复用性。不同的设计模式适用于不同的场景和需求，应该根据需求来选择合适的模式。同时，也需要注意避免过度使用设计模式，以免增加系统的复杂性和开销。