Паттерн Observer в веб-разработке: принципы реализации и применение

class EventEmitter {
constructor() {
this.events = {};
}

// Подписка на событие
subscribe(eventName, callback) {
if (!this.events[eventName]) {
this.events[eventName] = [];
}

const index = this.events[eventName].push(callback) – 1;

// Возвращаем функцию для отписки
return {
unsubscribe: () => {
this.events[eventName].splice(index, 1);

// Очистка массива событий, если подписчиков не осталось
if (this.events[eventName].length === 0) {
delete this.events[eventName];
}
}
};
}

// Публикация события
publish(eventName, data) {
if (!this.events[eventName]) {
return;
}

this.events[eventName].forEach(callback => {
callback(data);
});
}
}

class Store extends EventEmitter {
constructor(initialState = {}) {
super();
this.state = initialState;
}

// Получить текущее состояние или его часть
getState(path = '') {
if (!path) return this.state;

const keys = path.split('.');
return keys.reduce((obj, key) => 
(obj && obj[key] !== undefined) ? obj[key] : undefined, 
this.state
);
}

// Установить новое значение состояния
setState(path, value) {
const keys = path.split('.');
const lastKey = keys.pop();
const target = keys.reduce((obj, key) => {
if (obj[key] === undefined) obj[key] = {};
return obj[key];
}, this.state);

const oldValue = target[lastKey];
target[lastKey] = value;

// Публикуем событие изменения
this.publish(`state:${path}:changed`, { 
path, 
oldValue, 
newValue: value 
});

// Публикуем общее событие изменения состояния
this.publish('state:changed', { 
path, 
oldValue, 
newValue: value 
});
}
}

class CartComponent {
constructor(store) {
this.store = store;
this.subscriptions = [];

// Подписываемся на изменения в корзине
this.subscriptions.push(
store.subscribe('state:cart:changed', this.update.bind(this))
);

// Инициализация компонента
this.render();
}

update(data) {
console.log('Корзина обновлена:', data);
this.render();
}

render() {
const cart = this.store.getState('cart') || [];
const cartElement = document.getElementById('cart');

if (!cartElement) return;

cartElement.innerHTML = `
<h3>Корзина (${cart.length} товаров)</h3>
<ul>
${cart.map(item => `
<li>
${item.name} – ${item.price} ₽
<button data-id="${item.id}" class="remove-button">Удалить</button>
</li>
`).join('')}
</ul>
<p>Итого: ${cart.reduce((sum, item) => sum + item.price, 0)} ₽</p>
`;

// Добавляем обработчики событий
const removeButtons = cartElement.querySelectorAll('.remove-button');
removeButtons.forEach(button => {
button.addEventListener('click', () => {
const id = button.getAttribute('data-id');
this.removeItem(id);
});
});
}

removeItem(id) {
const cart = this.store.getState('cart') || [];
const updatedCart = cart.filter(item => item.id !== id);
this.store.setState('cart', updatedCart);
}

// Важно: отписываемся от событий при уничтожении компонента
destroy() {
this.subscriptions.forEach(subscription => subscription.unsubscribe());
this.subscriptions = [];
}
}

// Типизированная система событий
class TypedEventEmitter {
constructor() {
this.events = new Map();
}

on(eventType, handler) {
if (!this.events.has(eventType)) {
this.events.set(eventType, []);
}

const handlers = this.events.get(eventType);
const index = handlers.push(handler) – 1;

return {
off: () => {
handlers.splice(index, 1);
if (handlers.length === 0) {
this.events.delete(eventType);
}
}
};
}

emit(eventType, payload) {
if (!this.events.has(eventType)) {
return;
}

// Создаем копию массива обработчиков для безопасного перебора
// (на случай, если обработчик отпишется во время выполнения)
const handlers = [...this.events.get(eventType)];
handlers.forEach(handler => handler(payload));
}

// Отписать все обработчики определенного типа
offAll(eventType) {
if (eventType) {
this.events.delete(eventType);
} else {
this.events.clear();
}
}
}

// Обертка для логирования событий
class LoggedEventEmitter extends EventEmitter {
publish(eventName, data) {
console.log(`Event published: ${eventName}`, data);
super.publish(eventName, data);
}

subscribe(eventName, callback) {
console.log(`New subscriber for event: ${eventName}`);
return super.subscribe(eventName, callback);
}
}

// Пример интеграции с Vue.js
const store = Vue.reactive({
cart: [],
user: {
name: '',
isAuthenticated: false
}
});

// Создаем обертку для наблюдения за изменениями
const storeEmitter = new EventEmitter();

// Устанавливаем наблюдение за изменениями с помощью Vue.watch
Vue.watch(() => store.cart, (newValue, oldValue) => {
storeEmitter.publish('cart:changed', { newValue, oldValue });
}, { deep: true });

// Компоненты могут подписываться на изменения
storeEmitter.subscribe('cart:changed', ({ newValue }) => {
console.log('Корзина обновлена:', newValue);
});

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Каталог товаров</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<header id="header"></header>

<div class="main-content">
<aside id="filters"></aside>
<main id="product-list"></main>
</div>

<div id="cart-widget" class="cart-widget"></div>
</div>

<!-- Загрузка скриптов -->
<script src="js/core/EventEmitter.js"></script>
<script src="js/core/Store.js"></script>
<script src="js/services/ProductService.js"></script>
<script src="js/components/ProductList.js"></script>
<script src="js/components/Cart.js"></script>
<script src="js/components/Filters.js"></script>
<script src="js/components/Header.js"></script>
<script src="js/app.js"></script>
</body>
</html>

class EventEmitter {
constructor() {
this.events = {};
}

on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);

return {
unsubscribe: () => {
this.events[event] = this.events[event].filter(cb => cb !== callback);
if (this.events[event].length === 0) {
delete this.events[event];
}
}
};
}

emit(event, data) {
if (!this.events[event]) return;
this.events[event].forEach(callback => callback(data));
}
}

class Store extends EventEmitter {
constructor(initialState = {}) {
super();
this.state = initialState;
}

getState() {
return this.state;
}

setState(newState) {
const oldState = { ...this.state };
this.state = { ...this.state, ...newState };

// Уведомляем о изменении состояния
this.emit('state-changed', { 
oldState, 
newState: this.state 
});

// Анализируем, какие конкретно части состояния изменились
Object.keys(newState).forEach(key => {
if (oldState[key] !== this.state[key]) {
this.emit(`${key}-changed`, {
oldValue: oldState[key],
newValue: this.state[key]
});
}
});
}
}

class ProductService {
constructor() {
// Имитация данных с сервера
this.products = [
{ id: 1, name: 'Смартфон', price: 12000, category: 'Электроника' },
{ id: 2, name: 'Ноутбук', price: 45000, category: 'Электроника' },
{ id: 3, name: 'Футболка', price: 1500, category: 'Одежда' },
{ id: 4, name: 'Джинсы', price: 3000, category: 'Одежда' },
{ id: 5, name: 'Книга', price: 600, category: 'Книги' },
{ id: 6, name: 'Планшет', price: 20000, category: 'Электроника' }
];
}

getAll() {
return [...this.products];
}

getCategories() {
const categories = new Set(this.products.map(p => p.category));
return Array.from(categories);
}

filterByCategory(category) {
if (!category) return this.getAll();
return this.products.filter(p => p.category === category);
}

filterByPrice(min, max) {
let filtered = this.getAll();

if (min !== undefined) {
filtered = filtered.filter(p => p.price >= min);
}

if (max !== undefined) {
filtered = filtered.filter(p => p.price <= max);
}

return filtered;
}
}

class ProductList {
constructor(containerId, store, productService) {
this.container = document.getElementById(containerId);
this.store = store;
this.productService = productService;
this.subscriptions = [];

// Подписываемся на изменения фильтров и категории
this.subscriptions.push(
this.store.on('filters-changed', () => this.render())
);
this.subscriptions.push(
this.store.on('selectedCategory-changed', () => this.render())
);

// Первичный рендеринг
this.render();
}

render() {
const { filters, selectedCategory } = this.store.getState();
let products = this.productService.filterByCategory(selectedCategory);

if (filters) {
products = this.productService.filterByPrice(
filters.minPrice, 
filters.maxPrice
);
}

this.container.innerHTML = `
<h2>Товары${selectedCategory ? ': ' + selectedCategory : ''}</h2>
<div class="product-grid">
${products.map(product => `
<div class="product-card">
<h3>${product.name}</h3>
<p>${product.price} ₽</p>
<p>Категория: ${product.category}</p>
<button class="add-to-cart" data-id="${product.id}">
В корзину
</button>
</div>
`).join('')}
</div>
`;

// Добавляем обработчики событий для кнопок
this.container.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', () => {
const id = parseInt(button.getAttribute('data-id'));
const product = this.productService.getAll().find(p => p.id === id);

const { cart } = this.store.getState();
this.store.setState({ 
cart: [...cart, product] 
});
});
});
}

destroy() {
this.subscriptions.forEach(sub => sub.unsubscribe());
}
}

class Cart {
constructor(containerId, store) {
this.container = document.getElementById(containerId);
this.store = store;
this.subscriptions = [];

// Подписываемся на изменения в корзине
this.subscriptions.push(
this.store.on('cart-changed', () => this.render())
);

// Подписываемся на клик по кнопке скрытия/показа корзины
this.isVisible = false;

// Первичный рендеринг
this.render();
}

toggleVisibility() {
this.isVisible = !this.isVisible;
this.container.classList.toggle('cart-widget--visible', this.isVisible);
}

render() {
const { cart } = this.store.getState();
const totalItems = cart.length;
const totalPrice = cart.reduce((sum, item) => sum + item.price, 0);

this.container.innerHTML = `
<div class="cart-header">
<h3>Корзина (${totalItems})</h3>
<button class="cart-close">×</button>
</div>

<div class="cart-content">
${cart.length === 0 ? '<p>Корзина пуста</p>' : `
<ul class="cart-items">
${cart.map((item, index) => `
<li class="cart-item">
<span>${item.name} – ${item.price} ₽</span>
<button class="remove-from-cart" data-index="${index}">
Удалить
</button>
</li>
`).join('')}
</ul>

<div class="cart-footer">
<p>Итого: ${totalPrice} ₽</p>
<button class="checkout">Оформить заказ</button>
</div>
`}
</div>
`;

// Добавляем обработчики событий
this.container.querySelector('.cart-close').addEventListener('click', 
() => this.toggleVisibility()
);

this.container.querySelectorAll('.remove-from-cart').forEach(button => {
button.addEventListener('click', () => {
const index = parseInt(button.getAttribute('data-index'));
const { cart } = this.store.getState();
const newCart = [...cart];
newCart.splice(index, 1);

this.store.setState({ cart: newCart });
});
});

const checkoutButton = this.container.querySelector('.checkout');
if (checkoutButton) {
checkoutButton.addEventListener('click', () => {
alert('Заказ оформлен!');
this.store.setState({ cart: [] });
});
}
}

destroy() {
this.subscriptions.forEach(sub => sub.unsubscribe());
}
}

document.addEventListener('DOMContentLoaded', () => {
// Инициализация сервисов
const productService = new ProductService();

// Инициализация хранилища с начальным состоянием
const store = new Store({
cart: [],
selectedCategory: null,
filters: {
minPrice: 0,
maxPrice: 50000
}
});

// Инициализация компонентов
const productList = new ProductList('product-list', store, productService);
const cart = new Cart('cart-widget', store);
const filters = new Filters('filters', store, productService);
const header = new Header('header', store);

// Глобальный доступ для отладки
window.app = { store, productService };
});

// Адаптер для jQuery-компонентов
class jQueryObserverAdapter {
constructor($element, store, eventMapping) {
this.element = $element;
this.store = store;
this.subscriptions = [];

// Настраиваем маппинг событий
// Формат: { 'state-event': 'jquery-event' }
// Например: { 'cart-changed': 'cart.updated' }
this.eventMapping = eventMapping || {};

// Подписываемся на события из стора и транслируем их в jQuery-события
Object.entries(this.eventMapping).forEach(([storeEvent, jQueryEvent]) => {
this.subscriptions.push(
this.store.on(storeEvent, (data) => {
this.element.trigger(jQueryEvent, data);
})
);
});
}

// Обратная связь: из jQuery в Store
bindFromjQuery(jQueryEvent, stateUpdater) {
this.element.on(jQueryEvent, (event, data) => {
const stateUpdate = stateUpdater(data);
if (stateUpdate) {
this.store.setState(stateUpdate);
}
});
}

destroy() {
this.subscriptions.forEach(sub => sub.unsubscribe());

// Очищаем jQuery-обработчики
Object.values(this.eventMapping).forEach(jQueryEvent => {
this.element.off(jQueryEvent);
});
}
}

// Пример использования
const cartAdapter = new jQueryObserverAdapter(
$('#legacy-cart'),
store,
{ 'cart-changed': 'cart.updated' }
);

// Подписываемся на события из jQuery-компонента
cartAdapter.bindFromjQuery('cart.addItem', (data) => {
const { cart } = store.getState();
return { cart: [...cart, data.item] };
});

// Хук для использования Store в компонентах React
function useStore(store, selector) {
const [state, setState] = React.useState(() => selector(store.getState()));

React.useEffect(() => {
const subscription = store.on('state-changed', () => {
setState(selector(store.getState()));
});

// Начальная синхронизация
setState(selector(store.getState()));

return () => subscription.unsubscribe();
}, [store, selector]);
}

// Пример использования в компоненте
function CartComponent({ store }) {
const cart = useStore(store, state => state.cart);

return (
<div className="cart">
<h3>Корзина ({cart.length} товаров)</h3>
<ul>
{cart.map((item, index) => (
<li key={index}>
{item.name} – {item.price} ₽
<button 
onClick={() => {
const newCart = [...cart];
newCart.splice(index, 1);
store.setState({ cart: newCart });
}}
>
Удалить
</button>
</li>
))}
</ul>
</div>
);
}