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

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

不言

リリース： 2018-08-17 16:22:53

オリジナル

1806 人が閲覧しました

この記事では、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
    }
}

ログイン後にコピー