<MyRusakov.ru />

Программирование на Python с Нуля до Гуру

Программирование на Python с Нуля до Гуру

Данный курс научит Вас программировать на языке Python, который крайне желательно знать любому, кто хоть иногда имеет дело с компьютерами. Курс состоит из 6 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности.

К курсу прилагается множество упражнений и все исходники из уроков.

Наконец, Вы получите ещё несколько бонусов: "Создание калькулятора на Python", "Создание игры на Python" и "Правильная работа со справочником".

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Шаблон проектирования наблюдатель в JavaScript

Шаблон проектирования наблюдатель в JavaScript

Шаблон проектирования Наблюдатель - это популярный шаблон проектирования ПО широко используемый в разработке JavaScript-приложений. Экземпляр объекта (Subject) содержит коллекцию объектов-наблюдателей (Observers), которые он уведомляет, когда наступает определенное событие. Как бы сложно и непонятно это не звучало бы, в основе достаточно простой механизм.

Представим, что нам необходимо одновременно обновлять множество элементов на странице , при наступлении некоторого события (например, ввод текста в поле input). В данном случае нам необходима возможность добавлять объекты-наблюдатели, которые должны реагировать на изменение значения поля ввода. Также может понадобиться возможность удаления объектов-наблюдателей, для которых далее не нужно реагироватаь на изменения.

Вот как это все буде выглядеть в коде:

// определяем класс Subject
class Subject {
  
  constructor() {
    // массив объектов наблюдателей
    this.observers = [];
  }

  // добавляем объект-наблюдатель в массив
  subscribe(f) {
    this.observers.push(f);
  }

  // а здесь удаляем объект наблюдатель из массива
  // отфильтровывая значения
  unsubscribe(f) {
    this.observers = this.observers.filter(subscriber => subscriber !== f);
  }

  // вызываем каждый объект наблюдатель, передавая ему данные
  notify(data) {
    this.observers.forEach(observer => observer(data));
  }

}

Используем во так:

Файл разметки:

<input type="text" class="js-input" placeholder="type something here">
<button class="js-subscribe-p1">Подписаться</button>
<button class="js-unsubscribe-p1">Отписаться</button>
<p class="js-p1"></p>
<button class="js-subscribe-p2">Подписаться</button>
<button class="js-unsubscribe-p2">Отписаться</button>
<p class="js-p2"></p>
<button class="js-subscribe-p3">Подписаться</button>
<button class="js-unsubscribe-p3">Отписаться</button>
<p class="js-p3"></p>

Файл JavaScript

// ссылки на DOM
const input = document.querySelector('.js-input');
const p1 = document.querySelector('.js-p1');
const p2 = document.querySelector('.js-p2');
const p3 = document.querySelector('.js-p3');


// объекты наблюдатели
const updateP1 = text => p1.textContent = text;
const updateP2 = text => p2.textContent = text;
const updateP3 = text => p3.textContent = text;

// создаем класса Объекта Наблюдения
const subject = new Subject();

// добавляем наши действия в список наблюдателей
subject.subscribe(updateP1);
subject.subscribe(updateP2);
subject.subscribe(updateP3);

// при вводе текста в поле ввода, оповещаем всех наблюдателей о событии
input.addEventListener('keyup', e => {
  subject.notify(e.target.value);
});

Вот так можно использовать шаблон Наблюдатель в JavaScript. А, если эта тема Вам показалась сложной, то советую ознакомиться с моим курсом "JavaScript, jQuery и Ajax с Нуля до Гуру"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.