匠心独具，封装原生JS插件，发布-订阅开启前端新篇章

前端

2023-11-13 11:42:36

揭开发布-订阅模式的面纱

发布-订阅模式，也被称为观察者模式，是一种软件设计模式，它允许对象之间进行松散耦合的通信。在这种模式中，发布者和订阅者之间没有任何直接的依赖关系。发布者只需将消息发布到指定的频道，而订阅者只需订阅该频道，即可在发布者发布消息时收到通知。

发布-订阅模式之所以如此流行，是因为它具有以下优点：

松散耦合：发布者和订阅者之间没有任何直接的依赖关系，这使得它们可以独立于彼此进行开发和维护。
可扩展性：发布者和订阅者可以动态地加入或离开系统，而不会影响系统的整体功能。
可重用性：发布者和订阅者可以被复用于不同的系统中，这极大地提高了代码的重用性。

亲手打造原生JS插件

为了更好地理解发布-订阅模式，我们现在将共同创建一个原生JS插件，该插件将使用发布-订阅模式来实现动画效果。

首先，我们需要创建一个发布者对象。发布者对象负责发布消息。在我们的例子中，发布者对象将负责发布球的运动消息。

class Publisher {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  publish(message) {
    this.subscribers.forEach(subscriber => subscriber(message));
  }
}

接下来，我们需要创建一个订阅者对象。订阅者对象负责接收消息。在我们的例子中，订阅者对象将负责更新球的位置。

class Subscriber {
  constructor(publisher) {
    this.publisher = publisher;
    this.publisher.subscribe(this.updatePosition);
  }

  updatePosition(message) {
    // 更新球的位置
  }
}

最后，我们需要创建一个插件对象。插件对象负责初始化发布者和订阅者对象，并启动动画效果。

class Plugin {
  constructor() {
    this.publisher = new Publisher();
    this.subscriber = new Subscriber(this.publisher);

    this.start();
  }

  start() {
    // 启动动画效果
  }
}