javascript设计模式 – 观察者模式原理与用法实例分析

本文实例讲述了javascript设计模式 – 观察者模式原理与用法。分享给大家供大家参考，具体如下：

介绍：前面我们针对系统内一对多，多对多的情况做了解决方案，是使用中介者模式，将所有关联关系交由中介者处理。这一节我们介绍另外一种解决一对多问题的设计模式：观察者模式
观察者模式是使用频率最高的设计模式之一，用于建立一种对象与对象之间的依赖关系。

定义：定义对象之间的之间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式，模型-视图模式，监听模式或从属模式。观察者模式是一种对象行为型模式。

场景：我们使用观察者模式做一个进制转换的小demo

示例：

var subject = function(){
  var observer = [];
  var _state;
 
  this.getstate = function(){
    return _state;
  }
  this.setstate = function(state){
    _state = state;
    this.notifyallobservers();
  }
  this.attach = function(ob){
    observer.push(ob);
  }
  this.notifyallobservers = function(){
    observer.map(function(item){
      item.update();
    });
  }
}
 
var binaryobserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('binary string:' + _subject.getstate().tostring(2));
  }
}
 
var octalobserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('octal string:' + _subject.getstate().tostring(8));
  }
}
 
var hexaobserver = function(subject){
  var _subject = subject;
  _subject.attach(this);
 
  this.update = function(){
    console.log('hex string:' + _subject.getstate().tostring(16));
  }
}
 
var subject = new subject();
 
new hexaobserver(subject);
new octalobserver(subject);
new binaryobserver(subject);
 
subject.setstate(15);
// hex string:f
// octal string:17
// binary string:1111

在这个例子里面subject称为目标，它是被观察的对象，一个目标允许被多个观察者观察，这些观察者存放于observer的数组中，当目标发生change时通知所有观察者。
binaryobserver，octalobserver，hexaobserver这三个类称为观察者，观察者将对目标的改变作出反应。在观察者中需要维护一个指向目标对象的引用。

观察者模式总结：

优点：
* 观察者模式可以实现表示层和数据逻辑层的分离，定义了稳定的消息更新传递机制。
* 观察者模式在观察目标和观察者者之间建立一个抽象的耦合。观察目标只需要维持一个抽象观察者的集合，无需了解其具体观察者。
* 观察者模式支持广播通信，观察目标会向所有已注册的观察者发送通知，简化了一对多系统的设计难度

缺点：
* 在存在大量观察者时，对所有观察者的通知会花大量时间
* 如果观察者和目标之间存在循环依赖，将会导致系统崩溃

适用场景：
* 系统中存在一个对象的改变将导致一个或多个其他对象也发生改变。
* 系统中存在大量依赖链，a影响b，b影响c，c影响d

感兴趣的朋友可以使用在线html/css/javascript代码运行工具：http://tools.jb51.net/code/htmljsrun测试上述代码运行效果。