Plusieurs exemples d'implémentation de modèles de conception Javascript Compétences Observer pattern_javascript

Présentation

Le mode observateur est également appelé mode publication/abonnement (Publish/Subscribe). Il définit une relation un-à-plusieurs, permettant à plusieurs objets observateurs de surveiller un certain objet de sujet en même temps. Modifications de l'objet du sujet, tous les objets observateurs seront notifiés afin qu'ils puissent se mettre à jour automatiquement.

Avantages de l'utilisation du modèle d'observateur :

1. Prend en charge la communication de diffusion simple et avertit automatiquement tous les objets abonnés.
2. Une fois la page chargée, l'objet cible peut facilement entretenir une relation dynamique avec l'observateur, ce qui augmente la flexibilité.
3. La relation de couplage abstraite entre l'objet cible et l'observateur peut être étendue et réutilisée indépendamment.

Texte (version 1)

L'implémentation du modèle d'observateur dans JS se fait via des rappels. Définissons d'abord un objet pubsub, qui contient 3 méthodes : s'abonner, se désabonner et publier.

Copier le code Le code est le suivant :

var pubsub = {};
(fonction (q) {

var topic = {}, // Tableau stocké dans la fonction de rappel
        subUid = -1;
//Méthode de publication
​ q.publish = fonction (sujet, arguments) {

           si (!topics[topic]) {
              return false ;
>

setTimeout (fonction () {
               var abonnés = sujets[sujet],
                len = abonnés ? longueur : 0;

              while (len--) {
                  abonnés[len].func(topic, args);
            }
         }, 0);

        return true ;

};
//Méthode d'abonnement
​ q.subscribe = fonction (sujet, fonction) {

           si (!topics[topic]) {
sujets[sujet] = [];
>

      var token = ( subUid).toString();
sujets[sujet].push({
jeton : jeton,
               fonction : fonction
        });
         retourner le jeton ;
};
//Comment se désinscrire
​ q.unsubscribe = fonction (jeton) {
pour (var m dans les sujets) {
                if (sujets[m]) {
pour (var i = 0, j = sujets[m].length; i < j; i ) {
Si (sujets[m][i].token === jeton) {
sujets[m].splice(i, 1);
                                        jeton de retour ;
                 }
                }
            }
>
         return false ;
};
} (pubsub));

Utilisez comme suit :

Copier le code Le code est le suivant :

//Viens t'abonner
pubsub.subscribe('exemple1', fonction (sujets, données) {
console.log(topics ":" data);
});

//Publier une notification
pubsub.publish('exemple1', 'bonjour tout le monde !');
pubsub.publish('exemple1', ['test', 'a', 'b', 'c']);
pubsub.publish('exemple1', [{ 'color' : 'bleu' }, { 'text' : 'bonjour'}]);

Et si ? N'est-ce pas génial à utiliser ? Mais il y a un problème avec cette méthode, c'est-à-dire qu'il n'y a aucun moyen de se désinscrire. Si vous souhaitez vous désinscrire, vous devez préciser le nom du désabonnement, alors proposons une autre version :

.

Copier le code Le code est le suivant :

//Attribuer l'abonnement à une variable pour se désabonner
var testSubscription = pubsub.subscribe('example1', function (sujets, données) {
console.log(topics ":" data);
});

//Publier une notification
pubsub.publish('exemple1', 'bonjour tout le monde !');
pubsub.publish('exemple1', ['test', 'a', 'b', 'c']);
pubsub.publish('exemple1', [{ 'color' : 'bleu' }, { 'text' : 'bonjour'}]);

//Se désabonner
setTimeout (fonction () {
pubsub.unsubscribe(testSubscription);
}, 0);

//Publiez à nouveau pour vérifier si les informations peuvent toujours être sorties
pubsub.publish('example1', 'bonjour encore ! (cela va échouer)');

Version 2

On peut également utiliser les caractéristiques des prototypes pour implémenter un modèle d'observateur. Le code est le suivant :

Copier le code Le code est le suivant :

fonction Observateur() {
Ceci.fns = [];
>
Observer.prototype = {
Abonnez-vous : fonction (fn) {
This.fns.push(fn);
},
se désabonner : fonction (fn) {
This.fns = this.fns.filter(
                               fonction (el) {
Si (el !== fn) {
                                                                                                                                                                                                                                                                }                                                                                                           } );
},
Mise à jour : fonction (o, thisObj) {
        var scope = thisObj || fenêtre ;
This.fns.forEach(
                               fonction (el) {
                           el.call(scope, o);
                                                                                                          } );
>
};

//Test
var o = nouvel observateur ;
var f1 = fonction (données) {
console.log('Robbin : 'data', mettez-vous vite au travail !');
};

var f2 = fonction (données) {
console.log('Randall : 'data', demande-lui d'augmenter son salaire !');
};

o.subscribe(f1);
o.subscribe(f2);

o.update("Tom est de retour !")

//Désabonnement f1
o.unsubscribe(f1);
//Vérifiez à nouveau
o.update("Tom est de retour !");

Si vous êtes informé que la fonction filter ou forEach est introuvable, c'est peut-être parce que votre navigateur n'est pas assez récent et ne prend actuellement pas en charge les nouvelles fonctions standards. Vous pouvez le définir vous-même en utilisant la méthode suivante :

Copier le code Le code est le suivant :

si (!Array.prototype.forEach) {
Array.prototype.forEach = fonction (fn, thisObj) {
        var scope = thisObj || fenêtre ;
pour (var i = 0, j = this.length; i < j; i) {
                   fn.call(scope, this[i], i, this);
>
};
>
si (!Array.prototype.filter) {
Array.prototype.filter = fonction (fn, thisObj) {
        var scope = thisObj || fenêtre ;
      var a = [];
pour (var i = 0, j = this.length; i < j; i) {
Si (!fn.call(scope, this[i], i, this)) {
                         continuer ;
            }
            a.push(this[i]);
>
         renvoyer un ;
};
>

Version 3

Si nous voulons que plusieurs objets aient la fonction de publication et d'abonnement de l'observateur, nous pouvons définir une fonction générale, puis appliquer la fonction de cette fonction aux objets qui ont besoin de la fonction d'observateur. Le code est le suivant :

Copier le code Le code est le suivant :

//Code général
var observateur = {
//Abonnez-vous
AddSubscriber : fonction (rappel) {
This.subscribers[this.subscribers.length] = rappel;
},
//Se désabonner
​ RemoveSubscriber : fonction (rappel) {
pour (var i = 0; i < this.subscribers.length; i ) {
Si (this.subscribers[i] === rappel) {
                    supprimer (this.subscribers[i]);
            }
>
},
//Publier
publier : fonction (quoi) {
pour (var i = 0; i < this.subscribers.length; i ) {
If (typeof this.subscribers[i] === 'function') {
This.subscribers[i](quoi);
            }
>
},
// Crée un objet avec une fonction d'observateur
Faire : fonction (o) {
pour (var i dans ceci) {
            o[i] = this[i];
               o.subscribers = [];
>
>
};

Abonnez-vous ensuite à deux objets blogger et user, et utilisez la méthode observer.make pour que ces deux objets aient des fonctions d'observateur. Le code est le suivant :

Copier le code Le code est le suivant :

var blogueur = {
Recommander : fonction (id) {
        var msg = 'Messages recommandés par dudu :' id;
This.publish(msg);
>
};

var utilisateur = {
vote : fonction (id) {
        var msg = 'Quelqu'un a voté ID=' id;
This.publish(msg);
>
};

observer.make(blogger);
observer.make(user);

La méthode d'utilisation est relativement simple. Abonnez-vous à différentes fonctions de rappel afin de pouvoir vous inscrire à différents objets observateurs (vous pouvez également vous inscrire à plusieurs objets observateurs en même temps) :

Copier le code Le code est le suivant :

var tom = {
Lire : fonction (quoi) {
console.log('Tom a vu le message suivant : 'quoi)
>
};

var mm = {
show : fonction (quoi) {
console.log('mm a vu l'information suivante : 'quoi)
>
};
// Abonnez-vous
blogger.addSubscriber(tom.read);
blogger.addSubscriber(mm.show);
blogger.recommend(123); //Appel pour publier

//Se désabonner
blogger.removeSubscriber(mm.show);
blogger.recommend(456); //Appel pour publier

//Abonnement d'un autre objet
user.addSubscriber(mm.show);
user.vote(789); //Appeler la publication

version jQuery

Selon la nouvelle fonction on/off de jQuery version 1.7, nous pouvons également définir la version jQuery des observateurs :

Copier le code Le code est le suivant :

(fonction ($) {

var o = $({});

$.subscribe = fonction () {
o.on.apply(o, arguments);
};

$.unsubscribe = function () {
o.off.apply(o, arguments);
};

$.publish = fonction () {
o.trigger.apply(o, arguments);
};

} (jQuery));

La méthode d'appel est plus simple que les trois versions ci-dessus :

Copier le code Le code est le suivant :

//Fonction de rappel
poignée de fonction (e, a, b, c) {
// `e` est un objet événement, pas besoin d'y prêter attention
console.log(abc);
};

//Abonnez-vous
$.subscribe("/some/topic", handle);
//Publier
$.publish("/some/topic", ["a", "b", "c"]); // Sortie abc
                             

$.unsubscribe("/some/topic", handle); // Se désabonner

//Abonnez-vous
$.subscribe("/some/topic", fonction (e, a, b, c) {
console.log(abc);
});

$.publish("/some/topic", ["a", "b", "c"]); // Sortie abc

//Désabonnement (le désabonnement utilise le nom /some/topic au lieu de la fonction de rappel, ce qui est différent de l'exemple de la version 1
$.unsubscribe("/some/topic");

Comme vous pouvez le voir, son abonnement et son désabonnement utilisent des noms de chaînes au lieu de noms de fonctions de rappel, donc même si une fonction anonyme est transmise, nous pouvons toujours nous désinscrire.

Résumé

Le cas d'utilisation des observateurs est le suivant : lorsque des modifications apportées à un objet nécessitent des modifications sur d'autres objets en même temps, et qu'il ne sait pas combien d'objets doivent être modifiés, vous devriez envisager d'utiliser le modèle d'observateur.

En général, le modèle d'observateur fait un découplage, obligeant les deux parties du couplage à s'appuyer sur l'abstraction plutôt que sur le concret. De sorte que les changements de chaque côté n’affecteront pas les changements de l’autre côté.