Skip to content

Commit 1ac72e0

Browse files
chuanxshichuanxshi
committed
added jQuery pub/sub patterns
1 parent b537c69 commit 1ac72e0

4 files changed

Lines changed: 244 additions & 0 deletions

File tree

‎jquery-patterns/pubsub-callback.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
9+
<script>
10+
/* Title: Using jQuery 1.7's $.Callbacks() feature
11+
* 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/.
12+
*/
13+
14+
var topics = {};
15+
16+
jQuery.Topic = function( id ) {
17+
var callbacks,
18+
topic = id && topics[ id ];
19+
if ( !topic ) {
20+
callbacks = jQuery.Callbacks();
21+
topic = {
22+
publish: callbacks.fire,
23+
subscribe: callbacks.add,
24+
unsubscribe: callbacks.remove
25+
};
26+
if ( id ) {
27+
topics[ id ] = topic;
28+
}
29+
}
30+
return topic;
31+
};
32+
33+
34+
// Usage:
35+
// Subscribers
36+
$.Topic( 'mailArrived' ).subscribe( fn1 );
37+
$.Topic( 'mailArrived' ).subscribe( fn2 );
38+
$.Topic( 'mailSent' ).subscribe( fn1 );
39+
40+
// Publisher
41+
$.Topic( 'mailArrived' ).publish( 'hello world!' );
42+
$.Topic( 'mailSent' ).publish( 'woo! mail!' );
43+
44+
// Here, 'hello world!' gets pushed to fn1 and fn2
45+
// when the 'mailArrived' notification is published
46+
// with 'woo! mail!' also being pushed to fn1 when
47+
// the 'mailSent' notification is published.
48+
/*
49+
output:
50+
hello world!
51+
fn2 says: hello world!
52+
woo! mail!
53+
*/
54+
55+
// References
56+
// https://gist.github.com/1321768
57+
</script>
58+
</body>
59+
</html>

‎jquery-patterns/pubsub-custom-events.html‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
9+
<script>
10+
/* Title: Custom events using .on() and .off()
11+
* Description: A really tiny pub/sub implementation for jQuery 1.7 using the two new methods(since jQuery 1.7): .on() and .off().
12+
*/
13+
14+
/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
15+
* http://benalman.com/
16+
* Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */
17+
18+
(function($) {
19+
20+
var o = $({});
21+
22+
$.subscribe = function() {
23+
o.on.apply(o, arguments);
24+
};
25+
26+
$.unsubscribe = function() {
27+
o.off.apply(o, arguments);
28+
};
29+
30+
$.publish = function() {
31+
o.trigger.apply(o, arguments);
32+
};
33+
34+
}(jQuery));
35+
36+
37+
// Usage:
38+
// Super-basic example:
39+
40+
function handle(e, a, b, c) {
41+
// `e` is the event object, you probably don't care about it.
42+
console.log(a + b + c);
43+
};
44+
45+
$.subscribe("/some/topic", handle);
46+
47+
$.publish("/some/topic", [ "a", "b", "c" ]);
48+
// logs: abc
49+
50+
$.unsubscribe("/some/topic", handle); // Unsubscribe just this handler
51+
52+
// Or:
53+
54+
$.subscribe("/some/topic", function(e, a, b, c) {
55+
console.log(a + b + c);
56+
});
57+
58+
$.publish("/some/topic", [ "a", "b", "c" ]);
59+
// logs: abc
60+
// Unsubscribe all handlers for this topic
61+
$.unsubscribe("/some/topic");
62+
63+
// References
64+
// https://gist.github.com/1321768
65+
</script>
66+
</body>
67+
</html>

‎jquery-patterns/pubsub-observable.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script src="http://brado23.github.com/jquery-ui/jquery-1.6.2.js"></script>
9+
<script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.core.js"></script>
10+
<script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.widget.js"></script>
11+
<script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.button.js"></script>
12+
<script src="http://brado23.github.com/jquery-ui/ui/jquery.ui.observable.js"></script>
13+
<script src="http://brado23.github.com/jquery-ui/grid-editing/localstore.js"></script>
14+
<script src="http://brado23.github.com/jquery-ui/grid-editing/observer.js"></script>​
15+
<script>
16+
/* Title: Using jQuery UI $.Observable
17+
* 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
18+
*/
19+
20+
/*$.observers example by @addyosmani*/
21+
22+
var myData = [],
23+
observer = $.observer(myData);
24+
25+
function dataChange( data ){
26+
console.log('New data arrived with ID ' + data[0].id + ' and value ' + data[0].title);
27+
}
28+
29+
$(observer).bind("change", function ( e ) {
30+
dataChange( e.target.data );
31+
});
32+
33+
$.observable( myData ).insert({
34+
id: myData.length + 1,
35+
title: 'test'
36+
});
37+
38+
// References
39+
// https://gist.github.com/1321768
40+
</script>
41+
</body>
42+
</html>

‎jquery-patterns/pubsub-plugin.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<title>JavaScript Patterns</title>
5+
<meta charset="utf-8">
6+
</head>
7+
<body>
8+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
9+
<script>
10+
/* Title: One of the many third-party plugins
11+
* Description: Peter Higgin's jQuery plugin, available here: https://github.com/phiggins42/bloody-jquery-plugins/blob/master/pubsub.js
12+
*/
13+
14+
15+
;(function(d){
16+
// the topic/subscription hash
17+
var cache = {};
18+
19+
// Publish some data on a named topic.
20+
d.publish = function(/* String */topic, /* Array? */args){
21+
// topic: String - The channel to publish on
22+
// args: Array - The data to publish. Each array item is converted into an ordered
23+
// arguments on the subscribed functions.
24+
cache[topic] && d.each(cache[topic], function(){
25+
this.apply(d, args || []);
26+
});
27+
};
28+
29+
// Register a callback on a named topic.
30+
d.subscribe = function(/* String */topic, /* Function */callback){
31+
// @topic: String - The channel to subscribe to
32+
// @callback: Function - The handler event. Anytime something is $.publish'ed on a
33+
// subscribed channel, the callback will be called with the published array as
34+
// ordered arguments.
35+
//
36+
// returns: Array - A handle which can be used to unsubscribe this
37+
// particular subscription.
38+
39+
if(!cache[topic]){
40+
cache[topic] = [];
41+
}
42+
cache[topic].push(callback);
43+
return [topic, callback]; // Array
44+
};
45+
46+
// Disconnect a subscribed function for a topic.
47+
d.unsubscribe = function(/* Array */handle){
48+
// handle: Array - The return value from a $.subscribe call.
49+
var t = handle[0];
50+
cache[t] && d.each(cache[t], function(idx){
51+
if(this == handle[1]){
52+
cache[t].splice(idx, 1);
53+
}
54+
});
55+
};
56+
57+
})(jQuery);
58+
59+
60+
// Usage:
61+
// Publish stuff on '/some/topic'. Anything subscribed will be called
62+
// with a function signature like: function(a,b,c){ ... }
63+
64+
65+
$.subscribe("/some/topic", function(a, b, c){
66+
console.log(a,b,c);
67+
});
68+
69+
70+
$.publish("/some/topic", ["a","b","c"]);
71+
72+
// References
73+
// https://gist.github.com/1321768
74+
</script>
75+
</body>
76+
</html>

0 commit comments

Comments
 (0)