Observer Design Pattern in Javascript | Design Patterns Tutorial

In this video I take you through a way we can implement the Observer Pattern using Javascript.

The Observer Pattern works by defining a model and then a bunch of other dependencies (observers) on that model - so that when the model changes state, all the dependencies are notified of the change.

You will be developing a page with a button, when the button is pressed a number is incremented and a color is chosen at random - the number and color change are represented in the HTML page itself and the console.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #javascript #webdev

[estengrove]

This freakin' concept has been lingering at the tip my fingertips for so long, it felt like. But this video just solidified it using a clear and concise example. Killing it dcode! Thanks

[kcapt]

One of the best explanations of the Observer Design. Congrats dude!

[salamina_]

Great example. This explanation really helped me on the observer pattern . Thank you

[FilthySnob]

very clear and clean explanation, finally someone who uses humanely logical classes and constructors in their javascript code not the regular JS stuff like prototypes and function objects or whatever that javascript disgusting mess is

[santuparashetti]

Clean explanation with a perfect example. Thanks for sharing.

[luisgabriel]

Crystal clear my friend! Great explanation

[cristianquintero]

This is so amazing, please make more like this!

[faridul.hassan]

Very clear to understand and really very helpful. Thanks for the video :)

[worldofafrontenddeveloper]

Thank you for the video.Can anyone tell me if Promise can be called as an implementation of observer pattern ?

[kbms]

Excellent, no doubt this is one of the best for Observer Pattern, will you make more Design Pattern Tutorials maybe in Udemy

[angelrivera]

This video is amazing dude !!! thank you so much !! very good explanation !!

[KostaTsourdalakis]

Super helpful! Dcode is the best!😍😍😂😂👌👌

[farouktouil]

at 6:00 / 15:06 when I console.log model, I got this error : ReferenceError: NumberModel is not defined

[raymondmichael]

Clear explanation pattern, first to see your channel and subed already.

Greetings from Tanzania 🇹🇿

[ellsonmendesYT]

Awesome tutorial and explanation, the only concern I found whas passing the model
object to the observer, maybe passing just and object with the properties that have changed, this approach I found a little too ris
ky

[U-wf]

It's really helpful! Thank you for posting.

[eyalshnitzerful]

Great example!
Thanks a lot.
Im gonna do something like that

[baranidharanmurali]

Pro level explanation..
New to your channel subscribed..😋

[marinosterbah]

Nice but why would'nt a developer use dark theme ? especially for Atom

[kresimircosic]

Subbed. I am still kinda mediocre *OOP* user, but confusing thing for me was the schedule of information. For example, when you at near beginning used the *o.update(this)* on each observer. I was lost to why are you passing the instance of the *NumberModel* object inside the method. I thought that each observer will have their own *update* method which will do things - since they weren't yet made it confused me. Seeing them using actual information from the *NumberModel* instance made sense afterwards; but was like WTF why *this* inside the method... :) Thank you