Modèle d'observateur JavaScript (classique)_javascript conseils

Le modèle Observer, également appelé modèle Observer, est l'un des 23 modèles de conception de logiciels proposés par GoF. Le modèle Observer est l'un des modèles comportementaux. Sa fonction est que lorsque l'état d'un objet change, il peut automatiquement avertir les autres objets associés et actualiser automatiquement l'état de l'objet.

Concept de modèle d'observateur

Le mode observateur est l'un des modes comportementaux. Sa fonction est de notifier automatiquement les autres objets associés et d'actualiser automatiquement l'état de l'objet lorsque l'état d'un objet change.
Le modèle Observer fournit un moyen de communication synchrone pour les objets associés afin de maintenir la synchronisation d'état entre un objet et d'autres objets qui en dépendent.

Rôle du mode observateur :

Sujet (observé)
L'objet observé. Lorsque l'état à observer change, tous les objets observateurs dans la file d'attente doivent être notifiés. Le sujet doit maintenir (ajouter, supprimer, notifier) ​​une liste de files d'attente d'objets observateurs.
Sujet concret
La réalisation concrète de la personne observée. Contient certains états d’attributs de base et d’autres opérations.
Observateur
Interface ou classe abstraite. Lorsque l'état du sujet change, l'objet Observer sera averti via une fonction de rappel.
BétonObservateur
Mise en œuvre concrète de l'observateur. Après avoir été notifié, certains traitements spécifiques de la logique métier seront terminés.

Le modèle observateur (également appelé modèle éditeur-abonné) devrait être l'un des modèles les plus couramment utilisés. Il est largement utilisé dans de nombreux langages, y compris les événements dom avec lesquels nous sommes habituellement en contact. Il est également implémenté entre js. et dom Un modèle d'observateur.

div.onclick = function click (){
alert ( ”click' )
}

Tant que vous vous abonnez à l'événement click du div Lorsque le div est cliqué, la fonction click sera déclenchée.

Alors, qu’est-ce que le modèle d’observateur ? Examinons d’abord le modèle d’observateur dans la vie.

Il y a un dicton célèbre à Hollywood. "Ne m'appelle pas, je t'appellerai." Cette phrase explique les tenants et les aboutissants du modèle d'observateur. Où « je » est l'éditeur et « vous » est l'abonné.

Pour un autre exemple, lorsque je venais dans l'entreprise pour un entretien, chaque intervieweur me disait après l'entretien : "Veuillez laisser vos coordonnées et nous vous informerons s'il y a des nouvelles." Ici, « je » est l'abonné et l'intervieweur est l'éditeur. Je n’ai donc pas besoin de poser des questions sur les résultats de l’entretien tous les jours ou toutes les heures. L’initiative de la communication appartient à l’intervieweur. Et j'ai juste besoin de fournir des informations de contact.

Le modèle d'observateur peut très bien réaliser un découplage entre deux modules. Supposons que je développe un jeu HTML5 en équipe. Lorsque le jeu démarre, certains éléments d'image doivent être chargés. Après avoir chargé ces images, la logique du jeu est exécutée. Supposons qu'il s'agisse d'un projet qui nécessite une coopération à plusieurs personnes, j'ai terminé les modules Gamer et Map et mon collègue A a écrit un chargeur d'images loadImage.

Le code de loadImage est le suivant

loadImage( imgAry, function(){
Map.init();
Gamer.init();
} )

Une fois l'image chargée, la carte est rendue et la logique du jeu est exécutée. Eh bien, ce programme fonctionne bien. Soudain, un jour, je me suis rappelé que je devais ajouter une fonction sonore au jeu. code au chargeur d'images.

loadImage( imgAry, function(){
Map.init();
Gamer.init();
Sount.init();
} )

Mais le collègue A qui a écrit ce module est parti en voyage à l'étranger. Alors je l'ai appelé, bonjour, où est votre fonction loadImage, y a-t-il des effets secondaires après l'avoir modifiée ? un événement troublant s'est produit. Et si nous avions pu l'écrire ainsi :

loadImage.listen( ”ready', function(){
Map.init();
})
loadImage.listen( ”ready', function(){
Gamer.init();
})
loadImage.listen( ”ready', function(){
Sount.init();
})

Une fois loadImage terminé, il ne se soucie pas de ce qui se passera dans le futur, car son travail est terminé. Il lui suffit ensuite de publier un signal.

loadImage.trigger( ”ready' );

Ensuite, les objets qui écoutent l'événement 'ready' de loadImage seront notifiés. Tout comme le dernier exemple d'interview, l'intervieweur ne se soucie pas du tout de l'endroit où les enquêteurs iront manger après avoir reçu les résultats de l'interview. pour mener l'entretien. Rassemblez ensemble les CV des candidats. Lorsque les résultats de l'entretien seront publiés, vous serez averti un par un en fonction du numéro de téléphone figurant sur le CV

.

Après avoir parlé de tant de concepts, donnons une mise en œuvre concrète. Le processus de mise en œuvre est en fait très simple. L'intervieweur jette le CV dans une boîte, puis l'intervieweur prend le CV dans la boîte et appelle un par un. bon moment pour les informer du résultat

Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function( key, eventfn ) { //把简历扔盒子, key就是联系方式.
var stack, _ref; //stack是盒子
stack = ( _ref = obj[key] ) != null ? _ref : obj[ key ] = [];
return stack.push( eventfn );
};
one = function( key, eventfn ) {
remove( key );
return listen( key, eventfn );
};
remove = function( key ) {
var _ref;
return ( _ref = obj[key] ) != null ? _ref.length = 0 : void 0;
};
trigger = function() { //面试官打电话通知面试者
var fn, stack, _i, _len, _ref, key;
key = Array.prototype.shift.call( arguments );
stack = ( _ref = obj[ key ] ) != null ? _ref : obj[ key ] = [];
for ( _i = 0, _len = stack.length; _i < _len; _i++ ) {
fn = stack[ _i ];
if ( fn.apply( __this, arguments ) === false) {
return false;
}
}
return {
listen: listen,
one: one,
remove: remove,
trigger: trigger
}
}

Enfin, utilisez le mode observateur pour créer une petite application TV pour adultes.

//订阅者
var adultTv = Event();
adultTv .listen( ”play', function( data ){
alert ( “今天是谁的电影” + data.name );
});
//发布者
adultTv .trigger( ”play', { ‘name': ‘麻生希' } )