JavaScript-Implemented Publish/subscribe (PUB/SUB) mode
Time 2016-05-02 18:47:58 giantming ' s blog
Original http://giantming.net/javascriptshi-xian-de-fa-bu-ding-yue-pub-sub-mo-shi/
Topic JavaScript Viewer Mode
Some time ago I looked at the Publish subscriber mode (also known as the Observer mode), today < MVC-based JavaScript rich application development > see it, this design pattern is very useful, just write a blog to share. (I don't care about punctuation, don't hit me.)
Some front-end MVVM frames are used by the observer pattern implementation to be two-way bound
Let's go to Wikipedia:
The Observer pattern is one of the software design patterns. In this mode, a target object manages all the observer objects that are dependent on it and proactively notifies when its own state changes. This is usually done by calling the methods provided by each observer. This mode is often used for real-time event processing systems.
< The rich application development of the MVC-based JavaScript > explained above:
The Publish/Subscribe mode (PUB/SUB) is a message pattern that has two participants: Publisher and Subscriber. The publisher publishes a message to a channel that the subscriber binds to and receives a notification when a message is published to the channel. The most important thing is that the publisher and Subscribers are completely decoupled and don't know each other's existence. Both share only one channel name.
It's easy to understand: I ordered a newspaper at the newsstand, and when he gave me the newspaper, I took it.
Here, I become a subscriber, the newsstand is the publisher, when the newspaper delivered (state changes, notify subscribers), I went to take a look (do some work)
Nonsense said, I think I need to write a, otherwise the reader thought I was bragging, so, pretending to put in place, I pretend to write a bar (if there is similar purely coincidental)
A publisher should have three main methods: subscribe, post, unsubscribe.
To write a subscription first:
var PubSub = {};
var eventObj = {};
Pubsub.subscribe = function (event, FN) {
Eventobj[event] = fn;
}
Then write a release:
Pubsub.publish = function (event) {
if (Eventobj[event]) eventobj[event] ();
}
Finally write a unsubscribe:
Pubsub.off = function (event, FN) {
if (Eventobj[event]) eventobj[event] = null;
}
Let's tidy up the code. Hide Eventobj object with closures:
var PubSub = (function () {
var eventObj = {};
return {
Subscribe:function (event, FN) {
Eventobj[event] = fn;
},
Publish:function (event) {
if (Eventobj[event]) eventobj[event] ();
},
Off:function (event) {
if (eventobj[event]) Delete eventobj[event];
}
}
}());
Try to run if you can:
Pubsub.subscribe (' event ', function () {
Console.log (' event release ');
});
Pubsub.publish (' event '); ' Event release '
OK it work!!
This is definitely the simplest of the brain-free observer pattern implementations, do you think this is over?
This way. This event can only be bound to one operation, and the unsubscribe will delete the whole event, so it is not good, we should write a support for an event to bind multiple operations, and unsubscribe is to unsubscribe an event on an action, rather than delete the entire event
Again:
An event is bound to multiple operations, we should use an array to save the operation, published in the Order of subscription execution, the cancellation of the corresponding array element is good.
var PubSub = (function () {
var queue = {};
var subscribe = function (event, FN) {
if (!queue[event]) queue[event] = [];
Queue[event].push (FN);
}
var publish = function (event) {
var eventqueue = queue[event],
len = eventqueue.length;
if (eventqueue) {
Eventqueue.foreach (function (item, index) {
Item ();
});
}
}
var off = function (event, FN) {
var eventqueue = queue[event];
if (eventqueue) {
Queue[event] = Eventqueue.filter (function (item) {
return item!== fn;
});
}
}
return {
Subscribe:on,
Publish:emit,
Off:off
}
}());
The above is the implementation of a simple observer pattern.
Example
function First () {
Console.log (' event a publish first ');
}
Pubsub.subscribe (' A ', first);
Pubsub.subscribe (' A ', function () {
Console.log (' event a publish second ');
});
Pubsub.publish (' a '); Event a emit first, event a emit second
Pubsub.off (' A ', first);
Pubsub.publish (' a '); Event a emit second
Above.
JavaScript-Implemented Publish/subscribe (PUB/SUB) mode
