@Scket4
Студент, изучаю frontend

Как реализовать паттерн Наблюдатель?

Пытаюсь реализовать паттерн "наблюдатель". Суть вопроса:
Как сделать, чтобы переменная this.listeners в Observere была одна для всех?
Observer:
export class Observer {
  constructor() {
    this.listeners = {}
  }

  trigger(event, ...args) {
    if (!Array.isArray(this.listeners[event])) {
      return false
    } 
    this.listeners[event].forEach(listener => {
      listener(...args)
    })
    return true
  }

  subscribe(event, fn) {
    this.listeners[event] = this.listeners[event] || []
    this.listeners[event].push(fn)
  }
}


Class Slider:
export class Slider {
  constructor() {
    this.emitter = new Observer()
  }
}


В других классах я наследуюсь от Slider. Потом создаю объекты этих классов, но при создании объектов, видимо, у каждого класса создается своя переменная listeners.

Class1:
export class Model extends Slider {
  subscribe() {
    this.emitter.subscribe('1', (el) => console.log(el))
  }
}


Class2:
class Index extends Slider {
  call() {
    this.emitter.trigger('1', '1')
  }
}


При этом, в методе subscribe, в Observer, я добавил лог на переменную listeners. При выполнении метода subscribe в Model, listeners обновляется. Затем, при выполнении trigger в index, в observer приходит пустая переменная Listeners.
  • Вопрос задан
  • 126 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
видимо, у каждого класса создается своя переменная listeners.

Всё верно.

Нужно либо передавать аргумент в конструктор
export class Slider {
  constructor(emitter) {
    this.emitter = emitter
  }
}


const obs = new Observer()
const model = new Model(obs)
const index = new Index(obs)


Либо реализовать отдельный метод
const obs = new Observer()

const model = new Model()
model.attach(obs)

const index = new Index()
index.attach(obs)
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
ggbb
@ggbb
Привет.
Посмотри пожалуйста здесь -> https://refactoring.guru/ru/design-patterns/observ...

Если ты пишешь это не в образовательных целях, советую воспользоваться библиотечкой которая реализует такой функционал.
https://rxjs-dev.firebaseapp.com/guide/overview
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
DiState Санкт-Петербург
от 100 000 ₽
от 120 000 до 170 000 ₽
Artezio Нижний Новгород
от 130 000 до 180 000 ₽
02 дек. 2020, в 10:23
2000 руб./за проект
02 дек. 2020, в 10:07
10000 руб./за проект