观察者模式：
观察者模式是设计模式的一种：由一个目标实体(事件发送者)来维护一组的观察者，并自动把它们的状态改变通知观察者。
实现它需要一下几个部分：
- Subject: 目标
包含观察者序列类，包括对观察者的增加和删除等功能， - Observer: 观察者
定义Update接口，根据Subject状态定义不同函数，如
C#中对观察者接口的定义
public interface IObserver<in T>
{
void OnCompleted ();
void OnError (Exception error);
void OnNext (T value);
}
- ConcreteSubject: 具体目标（Subject的子类）
把状态变化广播通知给所有具体观察者，保存具体观察者的状态 - ConcreteObserver: 具体观察者（Observer的子类）
存储ConcreteSubject的引用（随时知道具体目标的状态发生改变），实现各种状态对应的Update方法使状态与具体目标保持一致
javascript 实现
- 观察者序列建模，实现一个observerList，包括方法：Add，Empty，Count，Get，Insert，IndexOf，RemoveIndexAt
function ObserverList(){
this.observerList = [];
}
ObserverList.prototype.Add = function( obj ){
return this.observerList.push( obj );
};
ObserverList.prototype.Empty = function(){
this.observerList = [];
};
ObserverList.prototype.Count = function(){
return this.observerList.length;
};
ObserverList.prototype.Get = function( index ){
if( index > -1 && index < this.observerList.length ){
return this.observerList[ index ];
}
};
ObserverList.prototype.Insert = function( obj, index ){
var pointer = -1;
if( index === 0 ){
this.observerList.unshift( obj );
pointer = index;
}else if( index === this.observerList.length ){
this.observerList.push( obj );
pointer = index;
}
return pointer;
};
ObserverList.prototype.IndexOf = function( obj, startIndex ){
var i = startIndex, pointer = -1;
while( i < this.observerList.length ){
if( this.observerList[i] === obj ){
pointer = i;
}
}
i++;
}
return pointer;
};
ObserverList.prototype.RemoveIndexAt() = function( index ){
if( index === 0 ){
this.observerList.shift();
}else if( index === this.observerList.length -1 ){
this.observerList.pop();
}
};
// Extend an object with an extension
//可以给观察者添加事件函数
function extend( extension, obj ){
for ( var key in extension ){
obj[key] = extension[key];
}
}
- 实现一个管理ObserverList的目标
function Subject(){
this.observers = new ObserverList();
}
Subject.prototype.AddObserver = function( observer ){
this.observers.Add( observer );
};
Subject.prototype.RemoveObserver = function( observer ){
this.observers.RemoveAt( this.observers.IndexOf( observer, 0 ) );
};
Subject.prototype.Notify = function( context ){
var observerCount = this.observers.Count();
for(var i=0; i < observerCount; i++){
this.observers.Get(i).Update( context );
}
};
- 声明一个观察者，Update方法可以被根据具体的客户行为重新
// The Observer
function Observer(){
this.Update = function(){
// ...
};
}
测试代码：
html
<button id="addNewObserver">Add New Observer checkbox</button>
<input id="mainCheckbox" type="checkbox"/>
<div id="observersContainer"></div>
** 脚本代码**
// References to our DOM elements
var controlCheckbox = document.getElementById( "mainCheckbox" ),
addBtn = document.getElementById( "addNewObserver" ),
container = document.getElementById( "observersContainer" );
// Concrete Subject
// Extend the controlling checkbox with the Subject class
extend( new Subject(), controlCheckbox );
// Clicking the checkbox will trigger notifications to its observers
controlCheckbox["onclick"] = new Function( "controlCheckbox.Notify(controlCheckbox.checked)" );
addBtn["onclick"] = AddNewObserver;
// Concrete Observer
function AddNewObserver(){
// Create a new checkbox to be added
var check = document.createElement( "input" );
check.type = "checkbox";
// Extend the checkbox with the Observer class
extend( new Observer(), check );
// Override with custom update behaviour
check.Update = function( value ){
this.checked = value;
};
// Add the new observer to our list of observers
// for our main subject
controlCheckbox.AddObserver( check );
// Append the item to the container
container.appendChild( check );
}
