how to implement observer pattern in javascript?

Question

Hi I\'m tyring to implement observer pattern in JavaScript:

My index.js:

$(document).ready(function () {
  var ironMan = new Movie();
           


        

Answer 1

This is old, but I wanted to provide an answer to the original question, "how to implement the observer pattern given the existing code".

The Observer pattern can be simplified as a communication design where the target (the thing being observed) has a pointer to the observer(s) and assumes a public API for an observer. For example, the target assumes that an observer has a method called update or that an observer is a Function. It's how a target notifies observers of changes, by actually calling a method on the observer object (or Function if the observer is a function).

Any time a property is mutated or changed, the target must update all observers that have registered to be notified.

Here, I'm assuming that you want to know how to implement a Key-Value Observer. In which case, the code will have to iterate over its observer list and call each observers update method (or just execute the observer in the case where it's a Function) when a property is changed.

var observers = null;

function Movie() {
 observers = new ObserverList();
}

Movie.prototype.changed = function(key, old, value){
  // Assumption here is that observers can observe individual properties.
  if(!this.observers[key]) return
  
  this.observers[key].forEach( o => {
    // Assumption is that observers have an update method. This is the only
    // thing the target knows about an observer.
      o.update(key, old, value, this)
  })

}

// Now every setter on the target has to notify the observers by calling `changed`
Movie.prototype.setTitle = function (newTitle) {
  var old = this.title;
  this.title = newTitle;
  this.changed("title", old, this.title, this)
}

you'd have to add that changed method and then update all the setter methods to call changed as per above.

I also noticed that there's nowhere in the original code that observes the movie. You'll need to add code that actually observes it, something that implements update, given my example above.

I'm unsure what the intent is for play and stop.