观察者模式与中介模式

Question

我做了一些谷歌搜索,是的,我知道有关这两者之间的差异的问题之前已经在stackoverflow和整个网络上被问过.但我主要找到措辞有问题的答案,这可能令人困惑.

我的问题是,如果有人在这里可以为我提供两个中介和观察者模式的视觉示例,可以清楚地展示两者之间的差异.在Javascript中.谢谢!

Answer 1

是的,它们是截然不同的.我将基于典型的单页Web应用程序场景,通过现实生活中的示例进行解释.我假设您的网页遵循典型的Model-View-XXX模式,因此您将拥有"视图".通过视图我理解一个javascript组件负责视觉表示和页面某些部分的相关逻辑 - 标题,图像列表,面包屑都是典型的视图.

观察

最适用于对整个站点功能有很大影响的单个对象.典型示例是用户设置或站点配置.

var settings = {
  fonts: "medium",
  colors: "light",
  observers: [],
  addObserver: function (observer) {
     this.observers.push(observer);
  },
  update : function(newSettings) {
     for (k in newSettings)
         this[k] = newSettings[k];
     this.fire();
  }
  fire: function() {
     var self = this;
     observers.forEach(function() { this.update(self); });
  }
}

每个视图的行为都有点像这样:

var view = {
   init: function() {
      //... attach to DOM elements etc...
      settings.addObserver(this); 
   },
   update: function(settings) {
      //... use settings to toggle classes for fonts and colors...
   } 
}

中间人

当您的站点的多个部分需要由某些逻辑编排时,最好使用.如果您最终通过多个回调跟踪单个用户操作并最终通过事件传递状态,那么引入调解器可能是有意义的.每个工作流程将有一个中介.一个具体的例子是照片上传.

var uploadMediator = {
    imageUploading: false,
    actors: {}, 

    registerActor: function(name, obj) {
       actors[name] = obj;
    },

    launch: function() {
       if (imageUploading)
             error('Finish previous upload first');  
       actors['chooser'].show();
       actors['preview'].hide();
       actors['progress'].hide();
    }

    selected: function(img) {
      actors['preview'].show(img); 
    }   

    uploading: function(progressNotifier) {
      imageUploading = true;
      actors['progress'].show(progressNotifier);
    }

    uploaded: function(thumbUrl) {
       //show thumbUrl in the image list
       imageUploading = false;
    }

}

当您的页面初始化时,所有actor(UI的各个部分,可能是视图)都会向mediator注册.然后,它成为代码中的单个位置,以在过程期间实现与状态管理相关的所有逻辑.

注意:上面的代码仅用于演示目的,并且需要更多的实际生产.大多数书籍也使用函数构造函数和原型.我只是试图传达这些模式背后的最低限度的想法.

当然,这些模式也很容易适用于中间层,例如基于node.js.