DEV Community

Nitin Bhatnagar
Nitin Bhatnagar

Posted on

Observer Pattern example in Javascript

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);

Discussion (0)