Javascript – Publish Subscribe Pattern

Posted: December 10, 2010 in Design Patterns, Javascript
Tags: , , ,

Following code is a simple example of publish subscriber modal using Javascript. Subscriber1, Subscriber2 are 2 subscribers for an event “PublishOnClick”. User is the publisher who publishes the event by clicking “Click Button & Publish Button Click Event” button. Publisher javascript code provides framework for adding/executing subscribers by different other modules in the same page. For example Subscriber1 can be in one module and Subscriber2 can be in another module and both can subscribe to single button action on the main page.

<input type=”button” value=”Click Button & Publish Button Click Event” id=”myfield2″/>
<script language=”javascript”>
    var Publisher = {
        subscribers: {},       
        Subscribe: function (event, callback) {
            if (Publisher[event] && typeof callback === “function”) {
                if (Publisher.subscribers[event]) {
                    Publisher.subscribers[event].callbacks.push(callback);
                }
                else {
                    Publisher.subscribers[event] = { callbacks: [callback] };
                }
            }
        },
        Publish: function (event, callback) {
            if (Publisher.subscribers[event].callbacks) {
                for (var callback in Publisher.subscribers[event].callbacks) {
                    Publisher.subscribers[event].callbacks[callback].apply(null, arguments);
                }
            }
        },
        // PublishOnClick – name should be same as subscribing event name. Similar to this method we can have different method for each new publishing event
        PublishOnClick: function (event, arguments) {
            Publisher.Publish(event, arguments);
        }
    };

    var Subscriber1 = {
        initialize: function () {
            if (Publisher.Subscribe) {
                Publisher.Subscribe(“PublishOnClick”, Subscriber1.Action);
            }
        },
        Action: function (a, b, c) {
            alert(“Subscriber1 Action – arg1: ” + a + “, arg2: ” + b + “, arg3: ” + c);
        }
    };
    Subscriber1.initialize();

    var Subscriber2 = {
        initialize: function () {
            if (Publisher.Subscribe) {
                Publisher.Subscribe(“PublishOnClick”, Subscriber2.Action);
            }
        },
        Action: function (a, b, c) {
            alert(“Subscriber2 Action – arg1: ” + a + “, arg2: ” + b + “, arg3: ” + c);
        }
    };
    Subscriber2.initialize();

    var fld2 = document.getElementById(“myfield2”); 
    if (fld2.addEventListener) {
        fld2.addEventListener(“click”, function () { Publisher.PublishOnClick(“PublishOnClick”, [‘1’, ‘2’, ‘3’]); }, false); // publish thru button click event
    }
    else if (fld2.attachEvent) {
        fld2.attachEvent(“onclick”, function () { Publisher.PublishOnClick(“PublishOnClick”, [‘1’, ‘2’, ‘3’]); }); // publish thru button click
    }
</script>

Advertisements
Comments
  1. ramudu says:

    hi I have implemented ur code in visual studio 2012 and I have problem with callback on publish function… can u please explain how the publisher logic works

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s