观察者模式：

观察者模式是设计模式的一种：由一个目标实体(事件发送者)来维护一组的观察者，并自动把它们的状态改变通知观察者。
实现它需要一下几个部分：

• 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 实现

1. 观察者序列建模，实现一个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];
  }
}

2. 实现一个管理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 );
  }
};

3. 声明一个观察者，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 );
}