观察者模式与中介者模式

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;
    }

}

当您的页面初始化时，所有参与者（UI 的各个部分，可能是视图）都会向中介者注册。然后它成为代码中的一个地方，用于在过程中实现与状态管理相关的所有逻辑。

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

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