관찰자 모드는 페이지 양을 변경합니다

이번에는 페이지 양을 변경하는 관찰자 모드를 가져오겠습니다. 관찰자 모드에서 페이지 양을 변경하는 데 사용하는 노트는 무엇입니까? 다음은 실제 사례입니다.

이 글의 예시에서는 JS디자인 패턴의 관찰자 모드를 사용하여 페이지의 금액을 실시간으로 변경하는 방법을 설명합니다. 다음과 같이 참조할 수 있도록 모든 사람과 공유하세요.

관찰자 디자인 패턴 개념:

게시/구독 패턴이라고도 불리는 관찰자 패턴은 일대다 종속 관계를 정의하여 여러 관찰자가 각 위치의 계정 금액 기능) 개체는 특정 토픽 개체(퍼블리셔가 하위 계정 금액을 수정한 후 호출한 배달 개체)도 모니터링합니다. 이 토픽 객체는 상태(deliver 메서드 호출)가 변경될 때 모든 관찰자 객체에 알리고 자동으로 업데이트되도록 합니다.

멤버십 관리 시스템에서 메인 계정은 서브 계정에 금액을 충전하는 기능을 가지고 있습니다.

시나리오: 메인 계정의 충전량이 1,000위안 증가하면 메인 계정의 충전 금액이 1,000위안 감소하여 9,000위안으로 표시됩니다. 실시간으로 변경해야 할 페이지의 많은 부분, 어떻게 해야 할까요?

위 그림에는 세 가지 총 잔액이 표시됩니다.

하위 추가 및 차감 버튼을 통해 계정 잔액을 조정하면 이 세 곳의 총 잔액도 그에 따라 변경되어야 합니다.

첫 번째 방법:

함수에 여러 요소 개체를 추가하면 반복되는 코드 호출을 단순화하는 파사드 패턴이 될 수 있습니다.

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

두 번째 방법: 상태가 변경되면 이와 관련된 종속성을 사용하세요. 그에 따라 변경됩니다.

// 订阅者
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;
 }
}

Client call

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

두 번째의 장점은 무엇인가요?

1. 각 구독자는 서로 독립적이며 게시자와만 관계를 갖습니다. 게시자와 일대일 관계가 될 수도 있습니다. 2. 각 구독자는 다른 구독자에게 영향을 주지 않고 자신의 필요에 따라 호출할 수 있습니다.

3. 첫 번째 방법에 비해 두 번째 방법의 코드는 더 읽기 쉽고 유지 관리가 쉽습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS는 호텔 숙박 비용을 자동으로 계산합니다

사진이 로드되기 전에 로딩 원을 표시하는 효과

JS로 공개 하위 시퀀스를 만드는 방법

위 내용은 관찰자 모드는 페이지 양을 변경합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!