JSFiddle - React, Tailwind, and code Playground

by johnhunter

HTML

<pre id="out">out:</pre>

JavaScript

var myObserved = makeObservable();

var myObserver = {
    update: function (msg) {
        alert(msg);
    }
};

function alert(msg) {
    document.getElementById('out').innerHTML += '\r' + msg ;
}


myObserved.addObserver(myObserver.update);
myObserved.notifyObservers('hello');



/*
    Returns an observable object.
*/
function makeObservable () {
    
    var observers = [];
    
    function getObserverIndex (fn) {
        for (var i = observers.length; i--; ) {
            if (observers[i] === fn) return i;
        }
        return -1;
    }
    
    function addObserver (fn) {
        if (typeof fn !== 'function') {
            throw new Error('observer must be a function');
        }
        if (getObserverIndex(fn) !== -1) {
            throw new Error('observer already in the list');
        }
        observers.push(fn);
    }
    
    function removeObserver (fn) {
        var i = getObserverIndex(fn);
        if (i === -1) {
            throw new Error('could not find observer in list of observers');
        }
        observers.splice(i, 1);
    }
    
    function notifyObservers (msg) {
        var currObservers = observers.slice(0),
            i = currObservers.length;
            
        while (i--) {
            currObservers[i](msg);
        }
    }
    
    return {
        addObserver: addObserver,
        removeObserver: removeObserver,
        notifyObservers: notifyObservers
    };
}