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

Question

[Алексей Голубев]

Пытаюсь реализовать паттерн "наблюдатель". Суть вопроса:
Как сделать, чтобы переменная 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.

Answer 1

[Alex]

видимо, у каждого класса создается своя переменная 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)

Comments

[Алексей Голубев]

Спасибо!

Answer 2

[ggbb]

Привет.
Посмотри пожалуйста здесь -> https://refactoring.guru/ru/design-patterns/observ...

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

Comments

[Алексей Голубев]

Пока что в образовательных целях, на чистом Js. Спасибо!)