Design Pattern - Pub/Sub

design-pattern-pubsub.js

class PubSub {
  constructor() {
    this.events = {};
  }
  subscribe(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);

    return () => this.unsubscribe(eventName, callback);
  }
  unsubscribe(eventName, callback) {
    if (this.events[eventName]) {
      this.events[eventName] = this.events[eventName].filter(
        (cb) => cb === callback
      );
    }
  }
  publise(eventName, data) {
    if (this.events[eventName]) {
      this.events[eventName].forEach((callback) => callback(data));
    }
  }
}

const pubSub = new PubSub();

const lockProductPrice = (product) => {
  console.log(`${product.name} is reserved at ₹ ${product.price}`);
};

const updateCartValue = (product) => {
  console.log(`Cart total is increased by  ₹ ${product.price}`);
};

pubSub.subscribe("cart:add", lockProductPrice);
pubSub.subscribe("cart:add", updateCartValue);

const product1 = {
  name: "Earphone",
  price: 2500,
};

const product2 = {
  name: "Keyboard",
  price: 1100,
};

pubSub.publise("cart:add", product1);
pubSub.publise("cart:add", product2);