Modèle d'observateur de modèles de conception JavaScript (modèle éditeur-abonné)_compétences javascript

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.

Copier le code Le code est le suivant :

div.onclick = fonction clic (){
alerte (« cliquez »)
>

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 entre 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 :

Copier le code Le code 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. Soudain, un jour, je me suis rappelé que je devais ajouter une fonction sonore au jeu. chargeur d'images.

Copier le code Le code est le suivant :

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 ? mal à l'aise s'est produit. Et si nous avions pu l'écrire comme ceci :

Copier le code Le code est le suivant :

loadImage.listen( ”prêt’, function(){
Map.init();
})
loadImage.listen( ”prêt’, function(){
Gamer.init();
})
loadImage.listen( ”prêt’, 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.

Copier le code Le code est le suivant :

loadImage.trigger( ”prêt’ );

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

Copier le code Le code est le suivant :

Événements = fonction() {
var écouter, enregistrer, obj, un, supprimer, déclencher, __this;
obj = {};
__this = ceci;
Listen = function( key, eventfn ) { //Jetez votre CV dans la boîte, la clé est vos coordonnées.
var stack, _ref; //la pile est une boîte
stack = ( _ref = obj[clé] ) != null _ref : obj[ clé ] = [];
return stack.push( eventfn );
};
un = fonction (clé, eventfn) {
supprimer(clé);
return écouter( clé, eventfn );
};
supprimer = fonction ( clé ) {
var_ref;
return ( _ref = obj[key] ) != null _ref.length = 0 : void 0;
};
trigger = function() { //L'intervieweur appelle pour avertir l'intervieweur
var fn, pile, _i, _len, _ref, clé ;
key = Array.prototype.shift.call( arguments );
stack = ( _ref = obj[ clé ] ) != null _ref : obj[ clé ] = [];
pour ( _i = 0, _len = stack.length; _i < _len; _i ) {
fn = pile[ _i ];
if ( fn.apply( __this, arguments ) === false) {
retourner faux ;
>
>
revenir {
écoute : écoute,
un : un,
supprimer : supprimer,
déclencheur : déclencheur
>
>

Enfin, utilisez le mode observateur pour réaliser une petite application TV adulte.

Copier le code Le code est le suivant :

//Abonnés
var adultTv = Événement();
adultTv .listen( ”play', function( data ){
alert ("dont le film est aujourd'hui" data.name );
});
//Publié par
adultTv .trigger( ”play', { 'name': 'Aso Nozomi' } )