/ Published in: JavaScript
The Observer pattern is more popularly known these days as the Publish/Subscribe pattern. It is a design pattern which allows an object (known as a subscriber) to watch another object (the publisher), where we provide a means for the subscriber and pub-lisher form a listen and broadcast relationship.
Popular JavaScript libraries such as dojo, jQuery (custom events) and YUI already have utilities that can assist in easily implementing a Pub/Sub system with very little effort.
Expand |
Embed | Plain Text
var pubsub = {}; (function(q) { var topics = {}, subUid = -1; // Publish or broadcast events of interest // with a specific topic name and arguments // such as the data to pass along q.publish = function( topic, args ) { if ( !topics[topic] ) { return false; } var subscribers = topics[topic], len = subscribers ? subscribers.length : 0; while (len--) { subscribers[len].func(topic, args); } return this; }; // Subscribe to events of interest // with a specific topic name and a // callback function, to be executed // when the topic/event is observed q.subscribe = function( topic, func ) { if (!topics[topic]) { topics[topic] = []; } var token = (++subUid).toString(); topics[topic].push({ token: token, func: func }); return token; }; // Unsubscribe from a specific // topic, based on a tokenized reference // to the subscription q.unsubscribe = function( token ) { for ( var m in topics ) { if ( topics[m] ) { for (var i = 0, j = topics[m].length; i < j; i++) { if (topics[m][i].token === token) { topics[m].splice(i, 1); return token; } } } } return this; }; }( pubsub )); //Usage : var testHandler = function (topics, data) { console.log(topics + ": " + data); }; // Subscribers basically "subscribe" (or listen) // And once they've been "notified" their callback functions are invoke var testSubscription = pubsub.subscribe('example1', testHandler); // Publishers are in charge of "publishing" notifications about events pubsub.publish('example1', 'hello world!'); pubsub.publish('example1', ['test', 'a', 'b', 'c']); pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello' }]); // Unsubscribe if you no longer wish to be notified pubsub.unsubscribe(testSubscription); // This will fail pubsub.publish('example1', 'hello again! (this will fail)');
You need to login to post a comment.
