JSFiddle - React, Tailwind, and code Playground

by joshpauljohnson

HTML

<div id="button">Click me!</div>

JavaScript

window.test = {};

test.MessageQueue = function() {
    
    var q = {};
    
    this.subscribe = function(event, callback) {
        instantiateEventQueue(event);
        q[event].push(callback);
    };
    
    this.publish = function(event) {
        instantiateEventQueue(event);
        for (var i = 0; i < q[event].length; i++) {
            q[event][i]();
        }
    };
    
    var instantiateEventQueue = function(event) {
        if (!q[event]) {
            q[event] = [];
        }
    };
};

test.HorseLover = function(messageQueue) {
    var messageQueue = messageQueue;
    var count = 3;
    
    this.recieveLove = function() {
        messageQueue.subscribe("horseLove", function() {
            count++;
            alert("I love horses too! "+count);
        });
    };
};

test.SendHorseLove = function(messageQueue) {
    var messageQueue = messageQueue;
    
    this.sendLove = function() {
        messageQueue.publish("horseLove");
    };
};

test.App = function() {
    var messageQueue = new test.MessageQueue();
    var horseLover = new test.HorseLover(messageQueue);
    var sender = new test.SendHorseLove(messageQueue);
    
    horseLover.recieveLove();
    
    $("#button").click(function() {
        sender.sendLove();
    });
};

var app = new test.App();