JavaScript 관찰자 패턴 정의 및 장면 인스턴스 코드에 대한 자세한 설명

Observer 패턴

은 객체 간의 일대다 종속 관계를 정의하므로 객체의 상태가 변경되면 이에 의존하는 모든 객체에 알림이 전송되고 자동으로 새로 고쳐집니다. 이는 게시 구독 모델이라고도 합니다.

구독자가 서로 독립적으로 변경될 수 있고, 발행자가 소비 의도가 있는 모든 구독자를 수용할 수 있도록 높은 수준의 추상화 전략이 필요합니다.

응용 시나리오:

이 모델은 먼저 응용 시나리오에 대해 이야기해야 이해하기 쉽습니다.

비교적 우리와 가까운 장면을 촬영해 보겠습니다. 블로그 공원에 구독 버튼이 있습니다(버그가 있는 것 같습니다). 예를 들어 Little A, Little B, Little C가 모두 내 블로그를 구독했습니다. 내 블로그가 업데이트되면 은(는) 이 세 사람에게 통일된 방식으로 이메일을 게시할 예정이며 구독자에게는 알림이 전송됩니다.

게시 및 구독 모델의 프로세스는 다음과 같습니다.

1. 게시자가 누구인지 결정합니다(예: 내 블로그).

2. 그런 다음 게시자에 캐시 목록을 추가하여 구독자에게 알리는 콜백 함수를 저장합니다.

3. 메시지를 게시하려면 게시자는 이 캐시 목록을 순회하고 여기에 저장된 구독자 콜백 기능을 차례로 트리거해야 합니다.

4. 구독 취소(예를 들어 이러한 구독 정보를 더 이상 받고 싶지 않은 경우 구독을 취소할 수 있습니다.)

코드는 다음과 같습니다.

var pubsub = {};  // 定义发布者
(function (q) {
  var list = [], //回调函数存放的数组，也就是记录有多少人订阅了我们东西
    subUid = -1;
  // 发布消息,遍历订阅者
  q.publish = function (type, content) {
    // type 为文章类型，content为文章内容
    // 如果没有人订阅，直接返回
    if (!list[type]) {
      return false;
    }
    setTimeout(function () {
      var subscribers = list[type],
        len = subscribers ? subscribers.length : 0;
 
      while (len--) {
        // 将内容注入到订阅者那里
        subscribers[len].func(type, content);
      }
    }, 0);
    return true;
  };
  //订阅方法，由订阅者来执行
  q.subscribe = function (type, func) {
    // 如果之前没有订阅过
    if (!list[type]) {
      list[type] = [];
    }
    // token相当于订阅者的id，这样的话如果退订，我们就可以针对它来知道是谁退订了。
    var token = (++subUid).toString();
    // 每订阅一个，就把它存入到我们的数组中去
    list[type].push({
      token: token,
      func: func
    });
    return token;
  };
  //退订方法
  q.unsubscribe = function (token) {
    for (var m in list) {
      if (list[m]) {
        for (var i = 0, j = list[m].length; i < j; i++) {
          if (list[m][i].token === token) {
            list[m].splice(i, 1);
            return token;
          }
        }
      }
    }
    return false;
  };
} (pubsub));
//将订阅赋值给一个变量，以便退订
var girlA = pubsub.subscribe(&#39;js类的文章&#39;, function (type, content) {
  console.log(&#39;girlA订阅的&#39;+type + ": 内容内容为：" + content);
});
var girlB = pubsub.subscribe(&#39;js类的文章&#39;, function (type, content) {
  console.log(&#39;girlB订阅的&#39;+type + ": 内容内容为：" + content);
});
var girlC = pubsub.subscribe(&#39;js类的文章&#39;, function (type, content) {
  console.log(&#39;girlC订阅的&#39;+type + ": 内容内容为：" + content);
});
//发布通知
pubsub.publish(&#39;js类的文章&#39;, &#39;关于js的内容&#39;);
// 输出：
// girlC订阅的js类的文章: 内容内容为：关于js的内容
// test3.html:78 girlB订阅的js类的文章: 内容内容为：关于js的内容
// test3.html:75 girlA订阅的js类的文章: 内容内容为：关于js的内容
//girlA退订了关于js类的文章
setTimeout(function () {
  pubsub.unsubscribe(girlA);
}, 0);
//再发布一次，验证一下是否还能够输出信息
pubsub.publish(&#39;js类的文章&#39;, "关于js的第二篇文章");
// 输出：
// girlB订阅的js类的文章: 内容内容为：关于js的第二篇文章
// girlC订阅的js类的文章: 内容内容为：关于js的第二篇文章

코드는 직접 실행할 수 있으므로 이해하기 쉽습니다.

장점과 단점:

장점: 관련 객체의 일관성을 유지해야 할 때 관찰자 패턴을 사용하면 객체 간의 긴밀한 결합을 피할 수 있습니다. 예를 들어, 한 개체는 해당 개체에 대한 정보를 알지 못한 채 다른 개체에 알릴 수 있습니다.

단점: 게시/구독 모델에서 게시자와 구독자를 분리해야 하는 경우 경우에 따라 애플리케이션의 특정 부분이 예상대로 작동하는지 확인하기 어려울 수 있습니다. 즉, 장점이 단점일 수도 있습니다

위 내용은 JavaScript 관찰자 패턴 정의 및 장면 인스턴스 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!