Я помню, когда я впервые попытался понять шаблон Observer, я был очень сбит с толку, потому что в то время я только начинал с такого дела, как разработка программного обеспечения, я был просто новичком-самоучкой со степенью в области бизнеса, пытающимся однажды стать разработчиком программного обеспечения. Это было почти 2 года назад. Теперь я хорошо это понимаю и часто использую в своей повседневной работе (да, я получил работу!). Это объяснение для тех, кто хочет понять его, а затем применить. Итак, вот моя лучшая попытка объяснить шаблон Observer как можно проще.

Первый пример для понимания шаблона следующий:

Например, на Youtube, если у вас есть там учетная запись, и мы немного подумаем об этом, мы понимаем, что на Youtube существует два типа пользователей. Создатели видео и зрители. Мы будем называть создателей видео наблюдаемыми людьми или наблюдаемыми каналами Youtube, хорошо? Можно сказать, что все остальные из нас — это зрители, мы те, кто смотрит эти видео на Youtube. Хорошо, мы знаем, что мы (зрители) можем подписаться на эти каналы Youtube или этих наблюдаемых людей (помните, что это одно и то же), чтобы получать уведомления, если один из них загрузил новое видео, верно? Они часто очень много повторяют эту фразу… Итак, если вы понимаете, как это работает, то теперь вы понимаете паттерн Observer. Шаблон Observer — это весь этот набор операций между Observables и подписчиками/наблюдателями. Создатели видео на Youtube — это Observable, как мы уже говорили ранее (или, как мы уже говорили, >Subject) и мы наблюдатели или лучше называемые наблюдателями, мы подписываемся на эти Observables, чтобы получать уведомления, когда они (Observables) изменяются. Как, например, когда Observables загружают новое видео, как мы видели выше.

Итак, давайте рассмотрим это в коде, я буду использовать JavaScript для примера, но это будет точно такой же пример с Youtube, так что вы легко его поймете.

// First, we define the YoutubeChannel class that will have the following functionalities (or functions or methods, it's the same): subscribe, unsubscribe and notify. I'll explain more below.
class YoutubeChannel {
  observers = [];
  subscribe(observer) {
    this.observers.push(observer);
  }
// 1*
  unsubscribe(observer) {
    const index = this.observers.findIndex(obs => {
      return obs === observer;
    });
  }
// 2*
  notify(newData) {
    this.observers.forEach(observer => observer.update(newData))
  }
}
// Second, we define the YoutubeSubscriptor class that will receive the updates from YoutubeChannel.
class YoutubeSubscriptor {
// 3*
  update(newData) {
    console.log(`We have received new data, that is: ${newData}`);
  }
}
// Using the classes
const pewDiePie = new YoutubeChannel();
const normalUser = new YoutubeSubscriptor();
pewDiePie.subscribe(normalUser); // 4*
pewDiePie.notify('I have a new video');  // on console will show/print 'We have received new data, that is: I have a new video'

Я написал четыре пункта внутри кода, чтобы объяснить его, если вы хотите знать, что они пытаются сделать.

1* Не беспокойтесь о том, что здесь делает код, он просто ищет наблюдатель, вызывающий функцию отмены подписки в массиве наблюдателей, чтобы отказаться от подписки.

2* Эта функция/метод (это то же самое) уведомляет каждого наблюдателя, что он находится в массиве наблюдателей.

3* Этот метод уведомляет об обновлении подписчика или наблюдателя и показывает сообщение.

4* normalUser подписались на канал pewDiePie

И это все. Если у вас есть какие-то вопросы, я буду рад ответить на них здесь.

Если вы хотите узнать больше о шаблонах дизайна с помощью JavaScript, проверьте это https://github.com/Josehdez96/design-patters-with-javascript.

Если вы хотите узнать больше о хороших практиках коммитов, проверьте это: https://github.com/Josehdez96/good-commit-practices.