Javascript設計パターンの複数の実装例 オブザーバーパターン_JavaScriptスキル

var pubsub = {};
(関数 (q) {

var topic = {}, // コールバック関数に格納される配列
subUid = -1;
//メソッドを公開
q.publish = 関数 (トピック, 引数) {

if (!topics[トピック]) {
return false;
}

setTimeout(function() {
varsubscribers = トピック[トピック],
len = 購読者.length : 0;

しながら (len--) {
subscribers[len].func(topic, args);
}
}, 0);

true を返します;

};
//サブスクリプションメソッド
q.subscribe = function (topic, func) {

if (!topics[トピック]) {
トピック[トピック] = [];
}

var token = ( subUid).toString();
トピック[トピック].push({
トークン: トークン、
func: func
});
トークンを返す;
};
//購読を解除する方法
q.unsubscribe = 関数 (トークン) {
for (トピック内の変数 m) {
if (トピック[m]) {
for (var i = 0, j = topic[m].length; i If (トピックス[m][i].token === トークン) {
トピック[m].splice(i, 1);
トークンを返す;
}
}
}
}
return false;
};
} (pubsub));

// ぜひ購読してください
pubsub.subscribe('example1', 関数 (トピック, データ) {
console.log(トピック ": " データ);
});

//通知を公開
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

//サブスクライブを解除する変数にサブスクリプションを割り当てます
var testSubscription = pubsub.subscribe('example1', function (トピック, データ) {
console.log(トピック ": " データ);
});

//通知を公開
pubsub.publish('example1', 'hello world!');
pubsub.publish('example1', ['test', 'a', 'b', 'c']);
pubsub.publish('example1', [{ 'color': 'blue' }, { 'text': 'hello'}]);

//購読を解除
setTimeout(function() {
pubsub.unsubscribe(testSubscription);
}, 0);

//再度パブリッシュして、情報がまだ出力できるかどうかを確認します
pubsub.publish('example1', 'こんにちは! (これは失敗します)');

function Observer() {
This.fns = [];
}
Observer.prototype = {
購読: function (fn) {
This.fns.push(fn);
}、
購読解除: function (fn) {
this.fns = this.fns.filter(
関数 (el) {
If (el !== fn) {
                                                                                                                                                                                } } );
}、
更新: function (o, thisObj) {
varscope = thisObj || window;
This.fns.forEach(
関数 (el) {
el.call(scope, o);
} );
}
};

//テスト
var o = 新しいオブザーバー;
var f1 = 関数 (データ) {
console.log('ロビン: ' データ '、すぐに作業を始めてください!');
};

var f2 = 関数 (データ) {
console.log('ランドール: ' データ '、給料を増やすように頼んでください!');
};

o.subscribe(f1);
o.subscribe(f2);

o.update("トムが帰ってきた!")

// f1 の購読を解除
o.unsubscribe(f1);
// 再度検証します
o.update("トムが帰ってきた!");

フィルターまたは forEach 関数が見つからないというメッセージが表示された場合は、ブラウザーが新しくなく、現在新しい標準関数をサポートしていない可能性があります。次の方法を使用して自分で定義できます。

バージョン 3

複数のオブジェクトにオブザーバーのパブリッシュおよびサブスクライブ関数を持たせたい場合は、一般的な関数を定義し、この関数の関数をオブザーバー関数が必要なオブジェクトに適用できます。コードは次のとおりです。

次に、blogger と user の 2 つのオブジェクトをサブスクライブし、observer.make メソッドを使用して、これら 2 つのオブジェクトにオブザーバー関数を持たせます。コードは次のとおりです。