javascript 实现 观察者 js观察者模式例子

说说我自己对这模式的理解，其思想核心是：每个被观察对象都依据对象数据的改变而改变，被观察对象一定要有同样的改变行为来约束，这个约束是被观察对象提供给观察器的统一接口。观察器会开发改变数据的行为。

 

JS是弱类型的脚本，很多东西都要约定的，不象.NET会有接口的约束，废话不多说，我们直接看实例：

观察者实例 1

var ObserverObj = 
{  /**//*依赖对象*/ 2
    FirstName: "Max", 3
    LastName: "Gan", 4
    Id: 1 5
} 6
 7
var ObserverManager = 
{ /**//*观察器*/ 8
    Observers:[], /**//*观察对象集*/ 9
    AddObserver: function(item)
{/**//*加入观察对象*/10
        this.Observers.push(item);11
    },12
    Change: function(obj)
{  /**//*改变对象行为*/13
        for(var item in obj)
{14
            ObserverObj[item] = obj[item];15
        }//改变数据依赖对象数据16
        for(var i = 0,len = this.Observers.length; i < len; i++)
{17
            var item = this.Observers[i];18
            item.Display();        //对象改变后，改变观察对象的行为Display; 为统一的接口19
        }20
    }21
}22
23
var Header = function()
{    /**//*观察对象Header*/24
    this.Display = function()
{25
        alert(ObserverObj.FirstName);26
    }27
}28
29
var Content = function()
{    /**//*观察对象Content*/30
    this.Display = function()
{31
        alert(ObserverObj.LastName);32
    }33
}34
35
var Foot = function()
{    /**//*观察对象Foot*/36
    this.Display = function()
{37
        alert(ObserverObj.Id);38
    }39
}

 上面的例子ObserverManager只提供了绑定的方法（AddObserver），其他的什么取消绑定啊之类的代码技巧，可能大家想一下就知道了．其实这些代码的最终目的就是当改变了Observers数据，其他的被对象也会根据数据的改变作出相应的回应．OK，现在我们把他们绑定一下．

/***绑定观察器动作***/

ObserverManager.AddObserver(new Header());

ObserverManager.AddObserver(new Content());

ObserverManager.AddObserver(new Foot());

 最后我们使用会怎么使用呢？（一个低能的问题．．．呵呵）看例子.

使用方法

1 <!--使用方法-->
2 <a href="javascript://" οnclick="ObserverManager.Change({FirstName:'老婆'});">改变FirstName</a>
3 <a href="javascript://" οnclick="ObserverManager.Change({LastName:'是母老虎'});">改变LastName</a>
4 <a href="javascript://" οnclick="ObserverManager.Change({Id:2});">改变Id</a>