13.Javascript设计模式之观察者模式----Observer
今天来整理一下有关观察者模式的东东。
概念
为了便于理解,首先我举一个现实生活中的例子:在快乐男生比赛过程其实就是观察者的一个体现,可以这样说吉杰是一个被观察者, 而杨二,包小柏,还有巫启贤就是3个观察者,被观察者操作(唱歌)时,观察者们就开始操作(评分),被观察者唱歌就是通知观察者们进行评分。
GoF说道:Observer模式的意图是“定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并被自动更新”。从这段话里我们可以得到两个信息,如下:
1. 观察者(具体执行操作的对象,有多个) 2. 被观察者(顾名思义是被观察的对象,如果该对象发生某些变化则通知观察者执行对应的操)
观察者模式示例
一句话,这个模式的实质就是你可以对某个对象的状态进行观察,并且在其发生改变时能够得到通知。因此给出下面这个非常简单的例子,您可以看看先...
//example using listeners var element = $('example'); var fn1 = function(e) { //handle click }; var fn2 = function(e) { // do other stuff with click }; addEvent(element, 'click', fn1); addEvent(element, 'click', fn2); // example using handlers var element = document.getElementById('b'); var fn1 = function(e) { // handle click }; var fn2 = function(e) { // do other stuff with click }; element.onclick = fn1; element.onclick = fn2; //fn1被覆盖了
在《Javascript设计模式》一书中,还给出了这样一个例子:
// Publisher API var Animation = function(o) { this.onStart = new Publisher, this.onComplete = new Publisher, this.onTween = new Publisher; }; Animation.method('fly', function() { // begin animation this.onStart.deliver(); for ( ... ) { // loop through frames // deliver frame number this.onTween.deliver(i); } // end animation this.onComplete.deliver(); }); // setup an account with the animation manager var Superman = new Animation({...config properties...}); // Begin implementing subscribers var putOnCape = function(i) { }; var takeOffCape = function(i) { }; putOnCape.subscribe(Superman.onStart); takeOffCape.subscribe(Superman.onComplete); // fly can be called anywhere Superman.fly(); // for instance: addEvent(element, 'click', function() { Superman.fly(); });
这个会不会看的有点儿费劲儿呢?呵呵,A za A za Fighting......