观察者模式

优质
小牛编辑
186浏览
2023-12-01

观察者模式是软件设计模式的一种。在此种模式中,一个目标对象管理所有相依于它的观察者对象,并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。

定义一个目标构造函数,并实现绑定、解绑和触发等方法:

function Subject() {
  this.events = {};
  this.count = 0;
}​
Subject.prototype.on = function( type, handler ) {
  var events = this.events;
  var token = (++this.count).toString();
​  if ( !events[type] ) {
    events[type] = [];
  }​  events[type].push({
    token: token,
    handler: handler
  });
​  return token;
}​Subject.prototype.off = function( token ) {
  var events = this.events;
  var type, i, l, observers;
​  for ( type in events ) {
    observers = events[type];
​    for ( i = 0, l = observers.length; i < l; i++ ) {
      if ( observers[i].token === token ) {
        observers.splice(i, 1);
​        return token;
      }
    }
  }
​  return false;
}
​Subject.prototype.trigger = function( type, args ) {
  var observers = this.events[type];
​  if ( !observers ) {
    return;
  }
​  var length = observers.length;​
  while ( length-- ) {
    observers[length].handler(type, args);
  }
}

实例化一个目标并进行三次绑定操作,其中两次用同一个主题,即共两个主题:

var pub = new Subject();var sub1, sub2, sub3;​var w1 = 'JavaScript Weekly';var w2 = 'Web Design Weekly';​sub1 = pub.on(w1, function( type, title ) {  console.log('%s (%s): %s', type, sub1, title);});​sub2 = pub.on(w1, function( type, title ) {  console.log('%s (%s): %s', type, sub2, title);});​sub3 = pub.on(w2, function( type, title ) {  console.log('%s (%s): %s', type, sub3, title);});​pub.trigger(w1, 'Celebrating 10 Years of the V8 JavaScript engine');pub.trigger(w2, 'The \'Capable Web\': A 10 Year Retrospective');

在分别触发那两个被绑定的主题后,控制台输出了三条信息。

将绑定两次的主题进行一次解绑操作后再次触发该主题:

pub.off(sub2);pub.trigger(w1, 'Celebrating 10 Years of the V8 JavaScript engine');

控制台中只输出一条信息。