• 观察者模式

    观察者模式

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

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

    1. function Subject() {
    2.   this.events = {};
    3.   this.count = 0;
    4. }
    6. Subject.prototype.on = function( type, handler ) {
    7.   var events = this.events;
    8.   var token = (++this.count).toString();
    10.   if ( !events[type] ) {
    11.     events[type] = [];
    12.   }
    14.   events[type].push({
    15.     token: token,
    16.     handler: handler
    17.   });
    19.   return token;
    20. }
    22. Subject.prototype.off = function( token ) {
    23.   var events = this.events;
    24.   var type, i, l, observers;
    26.   for ( type in events ) {
    27.     observers = events[type];
    29.     for ( i = 0, l = observers.length; i < l; i++ ) {
    30.       if ( observers[i].token === token ) {
    31.         observers.splice(i, 1);
    33.         return token;
    34.       }
    35.     }
    36.   }
    38.   return false;
    39. }
    41. Subject.prototype.trigger = function( type, args ) {
    42.   var observers = this.events[type];
    44.   if ( !observers ) {
    45.     return;
    46.   }
    48.   var length = observers.length;
    50.   while ( length-- ) {
    51.     observers[length].handler(type, args);
    52.   }
    53. }

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

    1. var pub = new Subject();
    2. var sub1, sub2, sub3;
    4. var w1 = 'JavaScript Weekly';
    5. var w2 = 'Web Design Weekly';
    7. sub1 = pub.on(w1, function( type, title ) {
    8.   console.log('%s (%s): %s', type, sub1, title);
    9. });
    11. sub2 = pub.on(w1, function( type, title ) {
    12.   console.log('%s (%s): %s', type, sub2, title);
    13. });
    15. sub3 = pub.on(w2, function( type, title ) {
    16.   console.log('%s (%s): %s', type, sub3, title);
    17. });
    19. pub.trigger(w1, 'Celebrating 10 Years of the V8 JavaScript engine');
    20. pub.trigger(w2, 'The \'Capable Web\': A 10 Year Retrospective');

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

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

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

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