Observer Pattern example in Javascript
Nitin Bhatnagar
Posted on September 30, 2019
This is an example of observer pattern in Javascript with the example of weather updates. Kindly wrap this function in
(function(window) {IFFE})(window);
var weatherForcast = {
/* observer is a list of subscribers.*/
observers: [],
/*weatherChange function will have updated weather*/
weatherChange: function (weather) {
for (var i = 0; i < this.observers.length; i++) {
this.observers[i].updateUI(weather);
}
},
/* subscribe function will add a subscriber in observer's list.*/
subscribe: function (widget) {
this.observers.push(widget);
var self=this;
return function(){
self.observers.splice(self.observers.indexOf(widget), 1);
};
},
/* Unsubscribe function will remove a subscriber from observer's list.*/
unsubscribe: function(){
this.observers.splice(this.observers.indexOf(Widget), 1)
}
};
/* Constructor function for Widget(Subscribers).*/
function Widget(name){
this.name = name;
}
/* function to update all the Subscribers when weather change.*/
Widget.prototype.updateUI = function(weather){
console.log('Weather in ' + this.name + ' is ' + weather + '\xB0C');
};
/* Creating widgets using constructor function*/
var x1 = new Widget('New Delhi');
var x2 = new Widget('Gurgaon');
var x3 = new Widget('Faridabad');
/* Subscribing for weather updates*/
var unsubx1 = weatherForcast.subscribe(x1);
var unsubx2 = weatherForcast.subscribe(x2);
var unsubx3 = weatherForcast.subscribe(x3);
/* weather updated */
weatherForcast.weatherChange(10);
console.log('========================');
/* unsubscribing one widget */
unsubx3();
/* weather updated */
weatherForcast.weatherChange(11);
💖 💪 🙅 🚩
Nitin Bhatnagar
Posted on September 30, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.