JavaScript オブザーバーパターン定義とシーンインスタンスコードの詳細説明

オブザーバー パターン

は、オブジェクト間の 1 対多の依存関係を定義します。これにより、オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトが通知され、自動的に更新されます。これは、サブスクリプション モデルの発行とも呼ばれます。

これには、サブスクライバーが互いに独立して変更でき、発行者が消費の意図を持つ任意のサブスクライバーを受け入れることができるように、高レベルの抽象化戦略が必要です。

アプリケーション シナリオ:

このモデルでは、最初にアプリケーション シナリオについて説明する必要があります。これにより、理解しやすくなります。

比較的身近なシーンを考えてみましょう。ブログパークに購読ボタンがあります（バグがあるようです）。たとえば、Little A、Little B、Little C がすべて私のブログを購読しています。私のブログが更新されると、 はこれら 3 人に統一された方法でメールを公開し、これらの購読者に通知されます

パブリッシュおよびサブスクライブ モデルのプロセスは次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。