JSFiddle - React, Tailwind, and code Playground

by blesh

JavaScript

//Observer pattern

function Observer(notifyFn) {
    this.notify = notifyFn || function () {};

    this.observe = function(subject) {
        if(!(subject instanceof Subject)) {
            throw new Error('not instance of Subject');
        };
        
        subject.registerObserver(this);
    };
}

function Subject() {
    var observers = [];

    this.registerObserver = function (observer) {
        observers.push(observer);
    };

    this.notifyObservers = function () {
        var args = [].slice.call(arguments, 0);
        for (var i = 0; i < observers.length; i++) {
            observers[i].notify.apply(this, args);
        }
    };

    this.unregisterObserver = function (observer) {
        for (var i = observers.length; i--;) {
            if (observers[i] === observer) {
                observers.splice(i, 1);
            }
        }
    };
}

var observer = new Observer(function () {
    console.log('Observed: ', arguments);
});

var something = new Subject();

something.set = function (key, val) {
    var old = something[key];
    something[key] = val;
    if (old !== val) {
        something.notifyObservers('change', key, val, old);
    }
    something.notifyObservers('set', key, val);
};

something.registerObserver(observer);

something.set('foo', 'bar');
something.set('wee', {
    test: 'this'
});