Skip to content
Browse files

added jQuery pub/sub patterns

  • Loading branch information...
1 parent b537c69 commit 1ac72e0d88286b89b7fbf3f519e00de6cf14cb1a @shichuan committed Jun 3, 2012
View
59 jquery-patterns/pubsub-callback.html
@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <title>JavaScript Patterns</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script>
+ /* Title: Using jQuery 1.7's $.Callbacks() feature
+ * Description: $.Callbacks are a multi-purpose callbacks list object which can be used as a base layer to build new functionality including simple publish/subscribe systems. We haven't yet released the API documentation for this feature just yet, more information on it (including lots of examples) here: http://addyosmani.com/blog/jquery-1-7s-callbacks-feature-demystified/.
+ */
+
+ var topics = {};
+
+ jQuery.Topic = function( id ) {
+ var callbacks,
+ topic = id && topics[ id ];
+ if ( !topic ) {
+ callbacks = jQuery.Callbacks();
+ topic = {
+ publish: callbacks.fire,
+ subscribe: callbacks.add,
+ unsubscribe: callbacks.remove
+ };
+ if ( id ) {
+ topics[ id ] = topic;
+ }
+ }
+ return topic;
+ };
+
+
+ // Usage:
+ // Subscribers
+ $.Topic( 'mailArrived' ).subscribe( fn1 );
+ $.Topic( 'mailArrived' ).subscribe( fn2 );
+ $.Topic( 'mailSent' ).subscribe( fn1 );
+
+ // Publisher
+ $.Topic( 'mailArrived' ).publish( 'hello world!' );
+ $.Topic( 'mailSent' ).publish( 'woo! mail!' );
+
+ // Here, 'hello world!' gets pushed to fn1 and fn2
+ // when the 'mailArrived' notification is published
+ // with 'woo! mail!' also being pushed to fn1 when
+ // the 'mailSent' notification is published.
+ /*
+ output:
+ hello world!
+ fn2 says: hello world!
+ woo! mail!
+ */
+
+ // References
+ // https://gist.github.com/1321768
+ </script>
+ </body>
+</html>
View
67 jquery-patterns/pubsub-custom-events.html
@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <title>JavaScript Patterns</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script>
+ /* Title: Custom events using .on() and .off()
+ * Description: A really tiny pub/sub implementation for jQuery 1.7 using the two new methods(since jQuery 1.7): .on() and .off().
+ */
+
+ /* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
+ * http://benalman.com/
+ * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
+
+ (function($) {
+
+ var o = $({});
+
+ $.subscribe = function() {
+ o.on.apply(o, arguments);
+ };
+
+ $.unsubscribe = function() {
+ o.off.apply(o, arguments);
+ };
+
+ $.publish = function() {
+ o.trigger.apply(o, arguments);
+ };
+
+ }(jQuery));
+
+
+ // Usage:
+ // Super-basic example:
+
+ function handle(e, a, b, c) {
+ // `e` is the event object, you probably don't care about it.
+ console.log(a + b + c);
+ };
+
+ $.subscribe("/some/topic", handle);
+
+ $.publish("/some/topic", [ "a", "b", "c" ]);
+ // logs: abc
+
+ $.unsubscribe("/some/topic", handle); // Unsubscribe just this handler
+
+ // Or:
+
+ $.subscribe("/some/topic", function(e, a, b, c) {
+ console.log(a + b + c);
+ });
+
+ $.publish("/some/topic", [ "a", "b", "c" ]);
+ // logs: abc
+ // Unsubscribe all handlers for this topic
+ $.unsubscribe("/some/topic");
+
+ // References
+ // https://gist.github.com/1321768
+ </script>
+ </body>
+</html>
View
42 jquery-patterns/pubsub-observable.html
@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <title>JavaScript Patterns</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <script src="http://brado23.github.com/jquery-ui/jquery-1.6.2.js"></script>
+ <script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.core.js"></script>
+ <script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.widget.js"></script>
+ <script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.button.js"></script>
+ <script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.observable.js"></script>
+ <script src="http://brado23.github.com/jquery-ui/grid-editing/localstore.js"></script>
+ <script src="http://brado23.github.com/jquery-ui/grid-editing/observer.js"></script>
+ <script>
+ /* Title: Using jQuery UI $.Observable
+ * Description: Using jQuery UI $.Observable (which is currently still under development), when objects/collections of data are changed or updated, events are triggered to inform any observers of the change
+ */
+
+ /*$.observers example by @addyosmani*/
+
+ var myData = [],
+ observer = $.observer(myData);
+
+ function dataChange( data ){
+ console.log('New data arrived with ID ' + data[0].id + ' and value ' + data[0].title);
+ }
+
+ $(observer).bind("change", function ( e ) {
+ dataChange( e.target.data );
+ });
+
+ $.observable( myData ).insert({
+ id: myData.length + 1,
+ title: 'test'
+ });
+
+ // References
+ // https://gist.github.com/1321768
+ </script>
+ </body>
+</html>
View
76 jquery-patterns/pubsub-plugin.html
@@ -0,0 +1,76 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <title>JavaScript Patterns</title>
+ <meta charset="utf-8">
+ </head>
+ <body>
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+ <script>
+ /* Title: One of the many third-party plugins
+ * Description: Peter Higgin's jQuery plugin, available here: https://github.com/phiggins42/bloody-jquery-plugins/blob/master/pubsub.js
+ */
+
+
+ ;(function(d){
+ // the topic/subscription hash
+ var cache = {};
+
+ // Publish some data on a named topic.
+ d.publish = function(/* String */topic, /* Array? */args){
+ // topic: String - The channel to publish on
+ // args: Array - The data to publish. Each array item is converted into an ordered
+ // arguments on the subscribed functions.
+ cache[topic] && d.each(cache[topic], function(){
+ this.apply(d, args || []);
+ });
+ };
+
+ // Register a callback on a named topic.
+ d.subscribe = function(/* String */topic, /* Function */callback){
+ // @topic: String - The channel to subscribe to
+ // @callback: Function - The handler event. Anytime something is $.publish'ed on a
+ // subscribed channel, the callback will be called with the published array as
+ // ordered arguments.
+ //
+ // returns: Array - A handle which can be used to unsubscribe this
+ // particular subscription.
+
+ if(!cache[topic]){
+ cache[topic] = [];
+ }
+ cache[topic].push(callback);
+ return [topic, callback]; // Array
+ };
+
+ // Disconnect a subscribed function for a topic.
+ d.unsubscribe = function(/* Array */handle){
+ // handle: Array - The return value from a $.subscribe call.
+ var t = handle[0];
+ cache[t] && d.each(cache[t], function(idx){
+ if(this == handle[1]){
+ cache[t].splice(idx, 1);
+ }
+ });
+ };
+
+ })(jQuery);
+
+
+ // Usage:
+ // Publish stuff on '/some/topic'. Anything subscribed will be called
+ // with a function signature like: function(a,b,c){ ... }
+
+
+ $.subscribe("/some/topic", function(a, b, c){
+ console.log(a,b,c);
+ });
+
+
+ $.publish("/some/topic", ["a","b","c"]);
+
+ // References
+ // https://gist.github.com/1321768
+ </script>
+ </body>
+</html>

0 comments on commit 1ac72e0

Please sign in to comment.
Something went wrong with that request. Please try again.