<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

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

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

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

Подписавшись по 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):

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