たとえば、データ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メソッドでは、トリガー/バインドを使用してトリガーの例を追加しました