Шаблон публикации-подписки (PubSub) — это популярный шаблон проектирования, используемый для облегчения взаимодействия между различными частями приложения без необходимости напрямую знать друг о друге. Этот шаблон особенно полезен для разделения компонентов в крупномасштабных приложениях, где события могут публиковаться, а подписчики могут реагировать на эти события.

В этой статье мы рассмотрим, как реализовать шаблон PubSub в JavaScript, используя как объектный, так и классовый подход. К концу вы получите четкое представление о том, как использовать этот шаблон в своих проектах.

Объектно-ориентированная реализация
Объектно-ориентированный подход прост и эффективен для сценариев, где достаточно одного глобального менеджера событий. Вот как это можно реализовать:

pubsub.js
const PubSub = {
    subscribers: [],

    subscribe: function(subscriber) {
        this.subscribers.push(subscriber);
    },

    publish: function(payload) {
        this.subscribers.forEach(subscriber => {
            subscriber(payload);
        });
    }
};

export default PubSub;

Как использовать объектно-ориентированный PubSub
В своем приложении вы можете импортировать объект PubSub куда угодно. Вот пример:

// file1.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 1 received:', payload);
});

// file2.js
import PubSub from './pubsub';

PubSub.subscribe((payload) => {
    console.log('File 2 received:', payload);
});

// main.js
import PubSub from './pubsub';

PubSub.publish('Hello from main!');

Реализация на основе классов
Для большей гибкости или когда вам нужно несколько экземпляров системы PubSub, можно использовать подход на основе классов. Это позволяет вам создавать независимые экземпляры PubSub со своим собственным списком подписчиков.

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

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

    unsubscribe(subscriber) {
        this.subscribers = this.subscribers.filter(sub => sub !== subscriber);
    }

    publish(payload) {
        this.subscribers.forEach(subscriber => {
            try {
                subscriber(payload);
            } catch (error) {
                console.error('Error in subscriber:', error);
            }
        });
    }
}

export default PubSub;

Как использовать PubSub на основе классов
Вот пример того, как вы можете использовать шаблон PubSub на основе классов в своем приложении:

import PubSub from './pubsub';

// Create an instance of PubSub
const pubSubInstance = new PubSub();

// Subscribe to events
pubSubInstance.subscribe((payload) => {
    console.log('Instance 1 received:', payload);
});

pubSubInstance.subscribe((payload) => {
    console.log('Instance 2 received:', payload);
});

// Publish an event
pubSubInstance.publish('Hello from instance!');

Заключение
Шаблон PubSub — это мощный инструмент для управления связью между различными частями вашего приложения. Независимо от того, решите ли вы использовать реализацию на основе объектов или классов, зависит от ваших конкретных потребностей. Объектно-ориентированный подход прост и понятен, идеально подходит для небольших проектов или когда достаточно одного глобального менеджера событий. С другой стороны, подход на основе классов обеспечивает большую гибкость и лучше подходит для более крупных приложений, где вам может потребоваться несколько экземпляров системы PubSub.

Не стесняйтесь использовать эти примеры в своих проектах и ​​изменять их в соответствии со своими потребностями. Приятного кодирования!