ここでObserver/Pub-Subパターンを使用するのはなぜですか？

Question

私はオブザーバーとパブリッシャー/サブスクライバーのパターンを習得しようとしています。

は、この単純な例をhere

問題を来た：それは、カウントを更新する必要があり、ボタンのボタンとonclickのがあります。私は単に私はそれは同じ使用オブザーバーパターンjsbin

の実装を有するオブザーバーパターンについて共有している上記リンクにおいて

window.onload = function() { 
 
    var container = document.querySelector('.container'); 
 
    var count = 0; 
 
    container.querySelector('#click').addEventListener('click', function() { 
 
    count = +document.querySelector("#count").innerHTML; 
 
    count++; 
 
    document.querySelector("#count").innerHTML = count; 
 
    }); 
 
}

<div class="container"> 
 
    <input type="button" id="click" value="click">Total Counts: <span id="count">0</span> 
 
</div>

ように行うことができ、任意のパターン無し

ここで私の質問は、コードを複雑にしないパターンの使い方です。私は本当にコードが解決しようとしていることを理解するのに苦労しています。これについて何か説明してください.JSBコードでthis.notifyは何をしていますか？

おかげ

Answer 1

ないパターンの専門家が、私は理解して何から助けてください、単一のイベントリスナーを取り込んで、あなたの例のような単純なコードで、Observerパターンは間違いなくやり過ぎでしょう。

上記のリンクで説明したように、「オブザーバーパターンは、イベント、コールバック、またはポーリングに依存することなく要素間の通信を可能にする簡単な方法です。オブザーバーパターンの最も良い点は、それを観察しているか、それが何人いるかを心配する必要はありません」ベースコードは誰がそれを見ているかを気にする必要がないので、ベース要素コードを変更することなくオブザーバーを簡単に取り付けることができます。それは何かが行われたこと（カウンター・プロパティを増やしたこと）を発表するだけで、それに応じて反応するのはオブザーバーの責任です。このため、カウンタコードは独自のものであり、実行する依存関係を持たない可能性があります（したがって、テストも容易になります）。オブザーバーを変更する必要がある場合は、カウンターコードに触れる必要はなく、副作用の原因となるリスクもあります。

比較すると、ご使用の例では、コールバックコードとカウンタが重複しています。異なる言い方をしたり、特定の要素の下にカウンター値を表示させるなどの変更を加える必要がある場合は、そのコードブロック全体に触れること以外に選択肢はありません。しかし、あなたのコード例は十分単純です。もしそれがすべてであれば、それは完全にうまく使用するべきです。私はそれがあなたのコールバック/オブザーバーは、あなたの実装非同期コードまず

Answer 2

別になっ非同期コードと約束、のようなものを扱うときObserverパターンの概念を理解する方が簡単だと思う

、必ず我々がオンになっているしてくださいオブザーバパターン（OP）の用語に関する同じページ：Observerオブジェクト、Subject（またはObservee）オブジェクト、Subject.addObserver(...)メソッド、およびSubject.notify(...)メソッドです。

OK、今、私は単に

として行うことができます任意のパターンのない

はありません、あなたが実際に暗黙の形でOPを使用しています。あなたが書いたとき：

container.querySelector('#click') 

をこのボタンへの参照を返します、私はbuttonそれに名前を付ける：

var button = container.querySelector('#click'); 

その後コールbutton.addEventListener(...)は基本的にSubject.addObserver(...)と同様です。つまり、buttonオブジェクトは実際にはOPのSubjectです。 Subject.notify(...)という呼び出しは、JavaScriptエンジンによって暗黙的に処理されます。そして、クリックイベントを消費するインライン関数は、実際にはObserverです。

あなたのコードとjarrettmeyer.comのコードとの主な違いは、whoはSubjectですか？ jarrettmeyer.comでは、Subjectはボタンではなく、別のオブジェクト（Counterオブジェクト）です。これは、いくつかの利点があります。

1. Subjectは、多くのボタンに関連付けることができ、例えば、jarrettmeyerを書くことができます。$("#anotherButton").on("click", function() { counter.increment(); });

2. Subjectが簡単にどんな状態を維持し、Observerにどんな情報を通知することができます。 jarrettmeyerの例では、これらの状態/情報は単にcountです。あなたの例では、Observerの実装の詳細に属し、したがってOPには関係していないspanの番号がcountに保持されているので、ボタンの状態/情報は通知されません（ちょうどクリックされたことを除いて） 。

Answer 3

はい、あなたは正しいです。 addEventListenerまたはjQuery .on()はObserverと同様のことができます。彼らは、フロントエンドの使い方のほとんどに十分です。しかし、次の使用例（バックエンド/抽象化）で、オブザーバーパターンが優れている：

1. イベントが聞かれてDOM要素に関連していない（例えばJSオブジェクトの突然変異）

2. あなたはしたいと思います例の.notifyメソッドは、すべてのコールバックループに行われ

removeEventListenerのよりよい制御を持っている（イベントタイプにバインド例えば、複数の匿名のコールバック関数、あなたがそれらのいずれかを移動したいと思います）

レジストリ配列内の関数を実行し、それらのすべてを実行しようとします。

現実世界でのオブザーバーの支援方法を示すCodepenです。

var App = function() { 
    // This array will store all the subscribers. 
    this.subscribers = []; 
} 
// Subscribe, unsubscribe and publish are three base methods in this pattern 
App.prototype.subscribe = function(subscriber) { 
    this.subscribers.push(subscriber); 
} 
App.prototype.unsubscribe = function(subscriber) { 
    for (var i = 0; i < this.subscribers.length; i++) { 
    if (this.subscribers[i] === subscriber) { 
     this.subscribers.splice(i, 1); 
    } 
    } 
} 
App.prototype.publish = function(message) { 
    for (var i = 0; i < this.subscribers.length; i++) { 
    console.log(this.subscribers[i] + ' got ' + message + '!'); 
    } 
} 
// Testing code. 
var myApp = new App(); 
myApp.subscribe('Timmy'); 
myApp.subscribe('Tommy'); 
myApp.publish('a new magazine'); // Both Timmy & Tommy got the new magazine 
myApp.unsubscribe('Timmy'); 
myApp.publish('a new book'); // Now only Tommy got the new book 

添付

参照用Codepen：私はObserverパターンを学習する際に

そして、ここでは、単純なオブザーバーの実装です。