Observer Design Pattern in Javascript | Design Patterns Tutorial
Vložit
- čas přidán 10. 11. 2017
- 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.
This was inspired by java.util.Observer and java.util.Observable.
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
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
Mate, no worries!
@@dcode-software It'd be really awesome if you did a series on JS design patterns series. I'm not sure if that's been asked before. But, it'd be greatly helpful.
A lot of online resources tend to have some an overly technical approach that further complicates already complex topics. But, I think your teaching style would suit such a series well.
Clean explanation with a perfect example. Thanks for sharing.
Thank you! Happy it helped you mate 😁
One of the best explanations of the Observer Design. Congrats dude!
Very clear to understand and really very helpful. Thanks for the video :)
Thanks very much mate :) You're welcome
This is so amazing, please make more like this!
Thank you and will do 😁
Great example. This explanation really helped me on the observer pattern . Thank you
Clear explanation pattern, first to see your channel and subed already.
Greetings from Tanzania 🇹🇿
Hey, I'm glad you took something from this video - and welcome to the channel 😁
Crystal clear my friend! Great explanation
No probs! Happy it helped
This video is amazing dude !!! thank you so much !! very good explanation !!
It's really helpful! Thank you for posting.
No problem at all :)
Wow!!!!!!!
Great example!
Thanks a lot.
Im gonna do something like that
Yeah! Implementing your own Observer Patten for small apps/projects been be a really good alternative to a library such as Vue
Super helpful! Dcode is the best!😍😍😂😂👌👌
Cheers mate
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
Great example!
Brilliant Example :-) Wel Done!!
Very useful tutorial.Thanks a lot.
Excellent , no doubt this is one of the best for Observer Pattern , will you make more Design Pattern Tutorials maybe in Udemy
Nice shot !!!
Thanks mate
Awesome tutorial. thanks mate
No worries mate, cheers
Wow!!! I got it. Thanks!
Pro level explanation..
New to your channel subscribed..😋
Thanks mate 😁
Nice one
👍 Great video.
Thanks mate, glad it helped
very helpful ❤️ thanks
Nice explanation 👍
Thank you, stoked it helped
thanks!!!
No probs!
very good example
No worries mate
brilliant
Thanks mate happy you enjoyed - it's a pretty good feeling discovering the Observer Pattern for the first time aye
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
great
thank you
No problem 😁
thanks a lot
Yeah no worries mate
Thank you for the video.Can anyone tell me if Promise can be called as an implementation of observer pattern ?
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
Good to hear mate!
Nice but why would'nt a developer use dark theme ? especially for Atom
Thanks for tutorials. Please make code available to download.
can you show simple mvvm with js ?
at 6:00 / 15:06 when I console.log model, I got this error : ReferenceError: NumberModel is not defined
A very nice tutorial. Just one comment: I don't think o.update(this) is a good way of subscribing. It exposes the entire model to the subscriber, thus a subscriber could use all the methods of the model. So if possible, use the private accessor on the methods, or instead of passing 'this', just pass the properties that should be exposed.
Here's the code for this video: minhaskamal.github.io/DownGit/#/home?url=github.com/kostasx/EventLoop/tree/master/javascript/design-patterns/Observer
Really nice tutorial. Thank you for sharing!