JavaScript-Implemented Publish/subscribe (PUB/SUB) mode

Source: Internet
Author: User
Tags emit

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.