Как я могу использовать Шаблон наблюдателя?

Question

Я только начинаю понимать, как работает шаблон наблюдателя. Но сейчас я хочу использовать его. Я вижу много примеров паттерна наблюдателя, но большинство просто демонстрируют паттерн и не показывают его реализацию для выполнения задачи.

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

Приведенный ниже код является распространенной программой Observer Pattern. Я вижу, что он выполняет console.log (console.log("Observer " + number + " is notified!");), когда наблюдатель уведомляется. Это где я мог бы вместо этого вернуть другие вещи: значения, вызовы функций и т. Д.?

Я видел наглядные примеры с простой математикой, которая обновляет вычисление при уведомлении наблюдателя (т. Е. Стоимость + налог = общая сумма). Но я не могу найти пример, который показывает, как код делает это. 1. как / где возвращается новая стоимость и 2. таким образом, наблюдатель (функция?) Получает уведомление об изменении стоимости; как / где функция получает обновленную стоимость?

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

var Subject = function() {
  let observers = [];

  return {
    subscribeObserver: function(observer) {
      observers.push(observer);
    },
    unsubscribeObserver: function(observer) {
      var index = observers.indexOf(observer);
      if(index > -1) {
        observers.splice(index, 1);
      }
    },
    notifyObserver: function(observer) {
      var index = observers.indexOf(observer);
      if(index > -1) {
        observers[index].notify(index);
      }
    },
    notifyAllObservers: function() {
      for(var i = 0; i < observers.length; i++){
        observers[i].notify(i);
      };
    }
  };
};

var Observer = function(number) {
  return {
    notify: function() {
      console.log("Observer " + number + " is notified!");
    }
  }
}

var subject = new Subject();

var observer1 = new Observer(1);
var observer2 = new Observer(2);

subject.subscribeObserver(observer1);
subject.subscribeObserver(observer2);

subject.notifyObserver(observer2);
subject.unsubscribeObserver(observer2);

subject.notifyAllObservers();

Answer 1

Приведенный ниже код является обычной программой для наблюдателей.Я вижу, что он выполняет console.log (console.log ("Наблюдатель" + число + "уведомлено!");), Когда наблюдатель уведомлен.Это где я мог бы вместо этого возвращать другие вещи: значения, вызовы функций и т. Д.?

Да, когда вызывающий субъект уведомляет, он может передавать данные вместо индекса или передавать себя наблюдателю.Таким образом, наблюдатель может проверить состояние субъекта и что-то с ним сделать.Метод notifyObserver становится:

notifyObserver: function(observer) { 
    var index = observers.indexOf(observer); 
    if(index > -1) { 
        observers[index].notify(this); 
    }
},

А наблюдатель выглядит примерно так:

var Observer = function(number) { 
    return { 
        notify: function(subject) { 
            // do something with subject 
           ... 
        } 
     } 
}

Answer 2

В простейшей форме Наблюдатель - это не что иное, как функция, которая вызывается Субъектом.Более «сложными» наблюдателями могут быть объекты с «уведомлением» или аналогичной функцией, обработчиком ошибок и, возможно, уведомлением «сделано», в зависимости от темы.

Итак, вот очень простой пример, демонстрирующий это:

var Subject = function() {
  let observers = [];

  return {
    subscribe: function(observer) {
      observers.push(observer);
    },
    unsubscribe: function(observer) {
      var index = observers.indexOf(observer);
      if(index > -1) {
        observers.splice(index, 1);
      }
    },
    nextValue: function(value) {
      // call every registered observer
      for(var i = 0; i < observers.length; i++){
        observers[i](value);
      }
    }
  };
};

// now simply pass an observer function to the subject
const subject = new Subject();

subject.subscribe(value => {
  // do whatever you want with the value, call functions etc.
  console.log(value);
});

subject.nextValue('hello world!');

Answer 3

Просто используйте библиотеку RxJs.

https://www.learnrxjs.io/

const { Subject } = rxjs;

const subject$ = new Subject();

subject$.subscribe(val => { console.log(val); });

subject$.next('Hello');

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.1/rxjs.umd.min.js"></script>