Observerパターンの背後にある考え方は、1対多タイプの依存関係を作成することです。 1つのオブジェクト（サブジェクト）の状態が変化すると、それに依存するオブジェクト（オブザーバー）に通知され、更新されます。 これは、リジッド接続なしで相互接続されたオブジェクトの状態を調整するために必要です。
たとえば、データA、B、Cを変更すると、プレゼンテーションを担当する図と表が変更されます。 表現の数はわかりません。
オブザーバーパターンは、このような態度を実装する方法を説明します。 SubjectおよびObserverオブジェクトに基づいています。 被験者は変化し、オブザーバーに変化を通知します。 オブザーバーは、データをサブジェクトと同期します。 この関係は、パブリッシャー-サブスクライバーとも呼ばれます。 サブジェクト（パブリッシャー）は、オブザーバー（サブスクライバー）に通知を送信しますが、それらがどのオブジェクトであるかを認識していません。 さらに、加入者の数に制限はありません。
Javascriptではどのように見えるのでしょうか？
出版社の発表
var Microsoft = new Publisher;
var Google = new Publisher;
var Apple = new Publisher;
* This source code was highlighted with Source Code Highlighter .
今加入者
var Ann = function (from) {
console.log( 'Delivery from ' +from+ ' to Ann' );
};
var Vasya = function (from) {
console.log( 'Delivery from ' +from+ ' to Vasya' );
};
var Maria = function (from) {
console.log( 'Delivery from ' +from+ ' to Maria ' );
};
* This source code was highlighted with Source Code Highlighter .
みんなに署名します
Ann.subscribe(Microsoft).subscribe(Google).subscribe(Apple);
Vasya.subscribe(Google).subscribe(Apple);
Maria.subscribe(Microsoft);
* This source code was highlighted with Source Code Highlighter .
購読者にニュースを送信する
Microsoft.deliver( 'news 1' ).deliver( 'news 2' );
Google.deliver( 'googlenews 1' ).deliver( 'googlenews 2' );
* This source code was highlighted with Source Code Highlighter .
それでは、パブリッシャーのコンストラクターを作成しましょう。 サブスクライバーはその中に保存されます。
function Publisher() {
this .subscribers = [];
}
* This source code was highlighted with Source Code Highlighter .
サブスクライバーに通知するためのパブリッシャーメソッド（配列の各拡張機能は、developer.mozilla.orgから入手できます）
Publisher.prototype.deliver = function (data) {
this .subscribers.forEach(
function (fn) {
fn(data);
}
);
return this ;
};
* This source code was highlighted with Source Code Highlighter .
そして、SubscribeメソッドをFunctionに追加して、サブスクライバーを追加します。
Function.prototype.subscribe = function (publisher) {
publisher.subscribers.push( this );
return this ;
};
* This source code was highlighted with Source Code Highlighter .
よくここに。 パターンの準備ができました。
これをすべて使用する方法は？
このパターンを長時間作用プロセスの指標として使用する方法を示します。 このアクションは、大きなデータ配列の処理、ファイルのサーバーへのアップロード、キャラクターの長期的な動き、そしていつかすべてのブラウザーで、readyState = 4の前のXHR処理が可能になるかもしれません。
パンダをパスに沿って移動させます。
var Animal= function (id){
this .onGo= new Publisher();
this .id=id;
this .domElement=$( '#' +id);
this .from=parseInt( this .domElement.css( 'left' ));
}
Animal.prototype.go= function (to,duration){
var start = new Date().getTime();
var that= this ;
setTimeout( function () {
var now = ( new Date().getTime()) - start;
var progress = now / duration;
if (progress > 1) progress = 1;
var result = (to - that.from) * progress + that.from;
that.domElement.css( 'left' , result+ 'px' );
that.onGo.deliver(progress);
if (progress < 1)
setTimeout(arguments.callee, 10);
}, 10);
}
...
var Panda= new Animal( 'panda' );
* This source code was highlighted with Source Code Highlighter .
コンストラクターでパブリッシャーthis.onGo = new Publisher（）を作成し、メソッドで現在の進捗状況that.onGo.deliver（progress）でニュースレターを作成しました。
現在、パンダの現在の状態にオブザーバーを追加する必要があります。 進行状況バーと移動した割合の数を表示します。 明らかに、2つのオブザーバーを作成します
var Status= function (v){
var per=v*100;
if (per>100)v=100;
$( "#status" ).html((per.toFixed(0))+ "%" )
}
var Bar= function (progress){
var w=(progress*596);
$( "#progressbar" ).css( 'width' ,w+ 'px' );
}
* This source code was highlighted with Source Code Highlighter .
onGoニュースレターにサインアップします
Bar.subscribe(Panda.onGo);
Status.subscribe(Panda.onGo);
* This source code was highlighted with Source Code Highlighter .
さて、パンダが動くと、インジケーターも変わります。
その結果、3つの独立したオブジェクトBar、Status、Animalを取得しました。これらは互いに独立して使用でき、パンダ（パブリッシャー）の状態に応じて静かに新しいオブジェクトを追加できます。
同様の結果は、jqueryトリガー/バインドで達成できます。 その後、サブスクライブする代わりに、バインドがハングします。 そして、Animal.goメソッドでは
、トリガー/バインドを使用してトリガーの例を追加しました