js modèles de conception : qu'est-ce que le modèle d'observateur (modèle de publication-abonnement) ? Introduction au modèle d'observateur js

Cet article vous apporte du contenu sur les modèles de conception js : Qu'est-ce que le modèle observateur (modèle de publication-abonnement) ? L'introduction du mode observateur js a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Qu'est-ce que le modèle d'observateur (modèle de publication-abonnement) ?

Définition : définit une relation de dépendance un-à-plusieurs entre les objets Lorsque l'état d'un objet change, tous les objets qui en dépendent sont notifiés et mis à jour automatiquement.

Résout principalement : Le problème de la notification à d'autres objets des changements d'état d'un objet, et de la prise en compte de la facilité d'utilisation et du faible couplage pour assurer un haut degré de collaboration.

Quand utiliser : Lorsque l'état d'un objet (objet cible) change, tous les objets dépendants (objets observateurs) seront notifiés et des notifications de diffusion seront effectuées.

Comment résoudre : Grâce à la technologie orientée objet, cette dépendance peut être affaiblie.

Code clé : Pour un certain topci, utilisez un tableau pour stocker les abonnés.

Exemples d'application : 1. Pendant l'enchère, le commissaire-priseur observe le montant le plus élevé. Faites une offre, puis informez les autres enchérisseurs d'enchérir. 2. Dans Journey to the West, Wukong a demandé au Bodhisattva de rendre le Garçon Rouge. Le Bodhisattva a aspergé d'eau partout sur le sol et a attiré une vieille tortue. Cette tortue était l'observateur. Il a observé l'action du Bodhisattva qui aspergeait l'eau.

Avantages du modèle observateur : 1. L'observateur et l'observé sont couplés abstraitement. 2. Établir un mécanisme de déclenchement.

Inconvénients du modèle d'observateur : 1. Si un objet observé a de nombreux observateurs directs et indirects, il en coûtera cher pour avertir tous les observateurs. 2. S'il existe une dépendance cyclique entre l'observateur et la cible d'observation, la cible d'observation déclenchera des appels cycliques entre eux, ce qui peut provoquer un crash du système. 3. Le mode observateur n'a pas de mécanisme correspondant pour permettre à l'observateur de savoir comment l'objet cible observé a changé, mais seulement de savoir que la cible d'observation a changé.

Scénarios d'utilisation du modèle d'observateur :

• Un modèle abstrait a deux aspects, dont l'un dépend de l'autre. Encapsuler ces aspects dans des objets séparés permet de les modifier et de les réutiliser indépendamment.

• Un changement dans un objet entraînera également le changement d'un ou plusieurs autres objets. On ne sait pas combien d'objets changeront, ce qui peut réduire le couplage entre les objets.

• Un objet doit notifier d'autres objets sans savoir qui ils sont.

• Vous devez créer une chaîne de déclenchement dans le système. Le comportement de l'objet A affectera l'objet B, et le comportement de l'objet B affectera l'objet C... Vous pouvez utiliser le modèle d’observateur pour créer un mécanisme de déclenchement en chaîne.

Remarques : 1. Évitez les références circulaires. 2. Si elle est exécutée séquentiellement, une erreur d'observateur entraînera le gel du système et une méthode asynchrone est généralement utilisée.

Implémentation du code du modèle d'observateur

/*
     *发布-订阅模式（观察者模式）
     */
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
    }
}

Recommandations associées :

modèle de conception js : qu'est-ce que le modèle d'itérateur ? Introduction au modèle d'itérateur js

modèle de conception js : qu'est-ce que le modèle de proxy ? Introduction au mode proxy js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!