Le mode observateur modifie le nombre de pages

Cette fois, je vais vous présenter le Mode Observateur pour modifier le montant d'argent sur la page Quelles sont les précautions concernant la modification du montant d'argent sur la page en mode Observateur. . Ce qui suit est un cas pratique. Levez-vous et jetez un œil.

L'exemple de cet article décrit la méthode de modification du montant d'argent sur la page en temps réel via le mode observateur de JSmodèle de conception. Partagez-le avec tout le monde pour votre référence, comme suit :

Concept de modèle de conception d'observateur :

Parfois appelé modèle de publication/abonnement, le modèle d'observateur définit un modèle One-to -de nombreuses dépendances permettent à plusieurs objets d'observateur (fonction de montant du compte principal à chaque emplacement) de surveiller un certain objet de sujet (livrer l'objet que l'éditeur a appelé après avoir modifié le montant du sous-compte) en même temps. Cet objet sujet avertira tous les objets observateurs lorsque l'état (appelant la méthode de livraison) change, leur permettant de se mettre automatiquement à jour.

Dans un système de gestion des membres, le compte principal a pour fonction de recharger la somme d'argent sur le sous-compte.

Scénario : Le compte principal dispose de 10 000 yuans. Si la recharge du sous-compte est augmentée de 1 000 yuans, alors le montant du compte principal doit être réduit de 1 000 yuans et affiché. comme 9 000 yuans ;

Il y a plusieurs emplacements sur la page qui doivent être modifiés en temps réel. Que dois-je faire ?

Il y a trois soldes totaux à afficher dans l'image ci-dessus

Si vous ajustez le solde du compte via les boutons de sous-ajout et de soustraction, le l'équilibre total de ces trois endroits sera également Des changements relatifs sont nécessaires ;

La première façon : Ajouter plusieurs objets éléments dans une fonction, qui peut être un mode façade pour simplifier l'appel de code répété ;

function modifyPrice(price) {
 $("#a1").html(price);
 $("#a2").html(price);
 $("#a3").html(price);
 $("#a4").html(price);
}

La deuxième façon : Utilisez le modèle de conception de l'observateur

// 订阅者
function a1( price ) {
 console.log( price );
 $("#a1").html(price);
}
// 订阅者
function a2( price ) {
 console.log( price );
 $("#a2").html(price);
}
// 订阅者
function a3( price ) {
 console.log( price );
 $("#a3").html(price);
}
// 订阅者
function a4( price ) {
 console.log( price );
 $("#a4").html(price);
}
// 发布者
function PublisherPrice() {
 this.subscribers = [];
 this.addSubscriber = function( subscriber) {
  // some 如果返回true说明this.subscriber数姐中已经有了相同的订阅者了，当遇到第一个比较值是true就返回true，如果没有遇到true最后返回一个false;
  var isExsit = this.subscribers.some(function( el ){
   return el == subscriber
  });
  if ( !isExsit ) {
   this.subscribers.push( subscriber );
  }
  return this;
 }
 this.deliver = function(
  // forEach 相当于是for循环
  this.subscribers.forEach(function( fn ) {
   fn(price);
  });
  return this;
 }
}

Quels sont les avantages de la deuxième option ?

var publisherPrice = new PublisherPrice();
publisherPrice.addSubscriber(a1);
publisherPrice.addSubscriber(a2);
publisherPrice.addSubscriber(a3);
publisherPrice.addSubscriber(a4);
publisherPrice.deliver("￥200.00");

1. Chaque abonné est indépendant les uns des autres et n'a qu'une relation avec l'éditeur. Il a une relation un-à-plusieurs avec l'éditeur, ou il peut aussi s'agir d'une relation un-à-plusieurs. relation à un. 2. Chaque abonné peut appeler selon ses propres besoins sans affecter les autres abonnés 3 Par rapport à la première méthode, le code de la deuxième méthode est plus lisible et maintenable ;

Je crois. vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

JS calcule automatiquement les coûts d'hébergement à l'hôtel

L'effet de l'affichage du cercle de chargement avant l'image est chargé

Comment créer une sous-séquence publique en 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!