Observer в javascript
Когда у приложения есть две части, которые должны по-разному реагировать на разные события, может возникнуть проблема с синхронизацией. Например, когда человек вводит определенную текстовую информацию, а программисту необходимо поменять несколько компонентов.
В этом случае используется Observer pattern, который создает связи между компонентами.
Итак, нужна реализация класса с такими методами:
Что мы делаем? Конечно же, создаем один паттерн, а затем в нескольких местах создаем на него подписки используя subscribe. И если вызвать observer.broadcast, то уведомления получат все подписчики.
Далее реализуем наш паттерн.
У нас получился класс, где хранится массива подписчиков. Также есть описание методов subscribe, unsubscribe и broadcast.
Чтобы убедится, что все написано правильно, проверяем работу кода.
В браузере видно два консоль лога с данными.
Теперь можно пробовать на реальном примере. Нужно написать 2 компонента: один для ввода данных, другой – для вывода количества введенных слов.
Добавляем в разметку 2 элемента.
Создаем паттерн и находим эти 2 элемента.
Далее подписываемся на blogObserver.
И файрим broadcast, при изменении текстового поля.
В качестве данных внутрь broadcast, мы передаем значение поля.
В браузере видно, что во время ввода данных стреляет console.log, показывая, что broadcast работает.
Далее нужно написать функцию для нахождения из текста количества слов.
И вызовем ее внутри subscribe.
Теперь мы видим в браузере, что количество слов меняется, а значит, все работает.
На этом простом и небольшом примере мы разобрали принцип работы Observer.
Подведем итог. Создав новый экземпляр класс Observer (например, для компонента поля), мы подписываемся на broadcast этого обсервера во всех необходимых нам компонентах, благодаря чему они синхронизируются. В итоге, при изменении, данные меняются во всех компонентах.
Якщо у вас виникли питання, вбо ви бажаєте записатися на індивідуальний урок, замовити статтю (інструкцію) або придбати відеоурок, пишіть нам на: скайп: olegg.pann telegram, viber - +380937663911 додавайтесь у телеграм-канал: t.me/webyk email: oleggpann@gmail.com ми у fb: www.facebook.com/webprograming24 Обов`язково оперативно відповімо на усі запитіння
Поділіться в соцмережах
Подобные статьи:
