js design patterns: What is the observer pattern (publish-subscribe pattern)? Introduction to js observer pattern

This article brings you content about js design patterns: What is the observer pattern (publish-subscribe pattern)? The introduction of js observer mode has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is the observer pattern (publish-subscribe pattern)?

Definition: Define a one-to-many dependency relationship between objects. When the state of an object changes, all objects that depend on it are notified and Automatic updates.

Mainly solves: The problem of notifying other objects of status changes of an object, and taking into account ease of use and low coupling to ensure a high degree of collaboration.

When to use: When the state of an object (target object) changes, all dependent objects (observer objects) will be notified and broadcast notifications will be made.

How to solve: Using object-oriented technology, this dependency can be weakened.

Key code: For a certain topci, use an array to store subscribers.

Application examples: 1. During the auction, the auctioneer observes the highest Place a bid and then notify other bidders to bid. 2. In Journey to the West, Wukong asked the Bodhisattva to surrender the Red Boy. The Bodhisattva sprinkled water all over the ground and attracted an old turtle. This turtle was the observer. He observed the action of the Bodhisattva sprinkling water.

Advantages of the observer pattern: 1. The observer and the observed are abstractly coupled. 2. Establish a trigger mechanism.

Disadvantages of the observer pattern: 1. If an observed object has many direct and indirect observers, it will cost a lot to notify all observers. time. 2. If there is a cyclic dependency between the observer and the observation target, the observation target will trigger cyclic calls between them, which may cause the system to crash. 3. The observer mode does not have a corresponding mechanism to allow the observer to know how the observed target object has changed, but only to know that the observation target has changed.

Observer pattern usage scenarios:

• An abstract model has two aspects, one of which depends on the other. Encapsulating these aspects in separate objects allows them to be changed and reused independently.

• Changes in one object will cause one or more other objects to also change. It is not known how many objects will change, which can reduce the coupling between objects.

• An object must notify other objects without knowing who they are.

• You need to create a trigger chain in the system. The behavior of object A will affect object B, and the behavior of object B will affect object C... You can use the observer pattern to create a chain. trigger mechanism.

Notes: 1. Avoid circular references. 2. If executed sequentially, an observer error will cause the system to freeze, and an asynchronous method is generally used.

Observer pattern code implementation

/*
     *发布-订阅模式（观察者模式）
     */
function pubsub() {
    var _pubsub = {},//全局对象，即发布订阅对象
        _topics = {}, // 回调函数存放的数组
        _subUid = 0;

    // 发布方法
    _pubsub.publish = function (topic) {
        if (!_topics[topic]) {
            return false;
        }
        var args = [].slice.call(arguments, 1);
        setTimeout(function () {
            var subscribers = _topics[topic];
            for (var i = 0, j = subscribers.length; i < j; i++) {
                subscribers[i].callback.apply(null, args);
            }
        }, 0);
        return true;
    };
    //订阅方法
    _pubsub.subscribe = function (topic, callback) {
        if (!_topics[topic]) {
            _topics[topic] = [];
        }
        var token = (++_subUid).toString();
        _topics[topic].push({
            token: token,
            callback: callback
        });
        return token;
    };
    //退订方法
    _pubsub.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 false;
    };

    return {
        subscribe: _pubsub.subscribe,
        publish: _pubsub.publish,
        unsubscribe: _pubsub.unsubscribe
    }
}

Related recommendations:

js design pattern: What is the iterator pattern? Introduction to the js iterator pattern

#js design pattern: What is the proxy pattern? Introduction to js proxy mode

The above is the detailed content of js design patterns: What is the observer pattern (publish-subscribe pattern)? Introduction to js observer pattern. For more information, please follow other related articles on the PHP Chinese website!