Is my use of the watcher pattern in this js example correct? – JavaScript – SitePoint Forums

I tried to figure out the observer model. Every time I read an article or watched a video tutorial, it seemed easy.

Can you verify if what I did is actually the observer model? Here is the code in codesandbox

I created a very basic buy card with three classes: Store, Products, Cart – where the Store is the observer. I pass the Store to the other two and let them push/record the observation methods, and also let them trigger them all.

In my head the Store should post something and the other two classes should be listening, whereas this code is just taking requests!

It’s like you’re a radio station DJ and I give you a CD and say “when I notify you, put the CD”

While I thought it was the other way around. Cloth Store DJ play any song, and I’ll start dancing at home if you play my favorite song

If someone could take a look at this basic code box just to let me know if I got it right.


Are you just trying to learn the pattern? If so, a shopping cart isn’t the best way to navigate it.

Assuming you just want to learn the model, I’d suggest using something closer to an actual publisher/subscriber model, such as a newspaper or magazine distributor.

I’ll use my actual Sirius Radio subscription as an example. In my car radio, I have set favorite songs/artists (I’m a subscriber, I’m the watcher). When Sirius Radio (publisher) is going to play (publish) one of my “favorites”, I am notified on the screen so I can change channels to hear it. The same happens to everyone else who subscribes to Sirius Radio and has their favorite songs/artists about to play, which may or may not be the same as mine.

All of us subscribers can also unsubscribe at any time, either from the favorites or from the service completely.

Like I said, I totally understand that, but in the actual code it looks like the juggler is being asked to do something different for each observer.

export default class Juggler {
  constructor() {
    this.name = "juggler";
    this.observers = [bobWantsX(), AliceWantsY(), MarkWantsZ()];
  }
  registerObserver(observer) {
    this.observers.push(observer);
  }
  notifyObservers() {
    this.observers.forEach((observer) => observer());
  }
}

As you can roughly see, Bob signed up for X, Alice signed up for Y, Mark signed up for Z.

While your explanation and everything I’ve read, the juggler just juggles() and if Bob wants to see it, he signs up.

From everything I’ve seen, I think my code must be correct just that i didn’t expect it when notifyObservers it would work like this

Going back to your cart example, does it really make sense to switch a store to a cart? When you go grocery shopping, do you pass the store to your stroller/cart or do you pass your groceries to the store for payment?

const observer = new Store(); 
const cart = new Cart({ observer });

It’s a bad name, but it’s the watcher. From the basket I register displayCartItemsI do the same in the products where I register the showCartCount

It shouldn’t be called a store but a watcher (like the variable name) and the shopping cart needs access to its register method.

I would start with a generic implementation instead of a concrete implementation such as a shopping cart. This should make it easier for you to “understand” the pattern.





1 like

Not that it makes much difference, but to remove an observer you tend to see the Array filter used.

removeObserver (observer) {
  this.observers = this.observers.filter(o => o !== observer)
}

Comments are closed.