js デザイン パターン: オブザーバー パターン (パブリッシュ/サブスクライブ パターン) とは何ですか? JS オブザーバー パターンの紹介

この記事では、JS デザイン パターンに関するコンテンツをお届けします: オブザーバー パターン (パブリッシュ/サブスクライブ パターン) とは何ですか? js オブザーバー モードの導入には一定の参考価値があります。必要な方は参考にしていただければ幸いです。

オブザーバー パターン (パブリッシュ/サブスクライブ パターン) とは何ですか?

定義: オブジェクト間の 1 対多の依存関係を定義します。オブジェクトの状態が変化すると、それに依存するすべてのオブジェクトが通知され、自動的に更新されます。

主な解決策: 1 つのオブジェクトの状態変化を他のオブジェクトに通知する問題。また、高度なコラボレーションを確保するために使いやすさと低結合を考慮しています。

いつ使用するか: オブジェクト (ターゲット オブジェクト) の状態が変化すると、すべての依存オブジェクト (オブザーバー オブジェクト) に通知され、ブロードキャスト通知が行われます。

解決方法: オブジェクト指向テクノロジーを使用すると、この依存関係を弱めることができます。

キーコード: 特定のtopciの購読者を保存するために配列を使用します。

アプリケーション例: 1. オークション中、競売人は最高入札額を観察し、他の入札者に入札するよう通知します。 2. 『西遊記』では、悟空は菩薩に赤坊主を降伏するように頼みました。菩薩は地面に水を撒き、老亀を引き寄せました。彼は菩薩が水を撒く様子を観察しました。

観察者パターンの利点: 1. 観察者と観察されるものは抽象的に結合されます。 2. トリガーメカニズムを確立します。

オブザーバーパターンの欠点: 1. 観測対象に直接および間接の観測者が多数いる場合、すべての観測者に通知するのに時間がかかります。 2. オブザーバーと観察ターゲットの間に循環依存関係がある場合、観察ターゲットはそれらの間で循環呼び出しをトリガーし、システムがクラッシュする可能性があります。 3. 観察者モードには、観察者が観察対象物体がどのように変化したかを知るための対応するメカニズムはなく、観察対象物が変化したことだけを知ることができます。

オブザーバー パターンの使用シナリオ:

• 抽象モデルには 2 つの側面があり、その 1 つは他方に依存します。これらの側面を別個のオブジェクトにカプセル化すると、それらを個別に変更して再利用できるようになります。

• 1 つのオブジェクトが変更されると、1 つまたは複数の他のオブジェクトも変更されるため、オブジェクト間の結合が減少する可能性があります。

• オブジェクトは、それが誰であるかを知らずに、他のオブジェクトに通知する必要があります。

• システムにトリガー チェーンを作成する必要があります。オブジェクト A の動作はオブジェクト B に影響し、オブジェクト B の動作はオブジェクト C に影響します。オブザーバー パターンを使用してチェーン トリガー メカニズムを作成できます。 。

注: 1. 循環参照を避けてください。 2. 順次実行するとオブザーバエラーによりシステムがフリーズするため、非同期方式が一般的です。

オブザーバー パターン コードの実装

/*
     *发布-订阅模式（观察者模式）
     */
function pubsub() {
    var _pubsub = {},//全局对象，即发布订阅对象
        _topics = {}, // 回调函数存放的数组
        _subUid = 0;

    // 发布方法
    _pubsub.publish = function (topic) {
        if (!_topics[topic]) {
            return false;
        }
        var args = [].slice.call(arguments, 1);
        setTimeout(function () {
            var subscribers = _topics[topic];
            for (var i = 0, j = subscribers.length; i < j; i++) {
                subscribers[i].callback.apply(null, args);
            }
        }, 0);
        return true;
    };
    //订阅方法
    _pubsub.subscribe = function (topic, callback) {
        if (!_topics[topic]) {
            _topics[topic] = [];
        }
        var token = (++_subUid).toString();
        _topics[topic].push({
            token: token,
            callback: callback
        });
        return token;
    };
    //退订方法
    _pubsub.unsubscribe = function (token) {
        for (var m in _topics) {
            if (_topics[m]) {
                for (var i = 0, j = _topics[m].length; i < j; i++) {
                    if (_topics[m][i].token === token) {
                        _topics[m].splice(i, 1);
                        return token;
                    }
                }
            }
        }
        return false;
    };

    return {
        subscribe: _pubsub.subscribe,
        publish: _pubsub.publish,
        unsubscribe: _pubsub.unsubscribe
    }
}

関連する推奨事項:

js デザイン パターン: イテレーター パターンとは何ですか? jsイテレーターパターン入門

jsデザインパターン: プロキシパターンとは何ですか? jsプロキシモードの紹介

以上がjs デザイン パターン: オブザーバー パターン (パブリッシュ/サブスクライブ パターン) とは何ですか? JS オブザーバー パターンの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。