javascript - 观察者模式 vs 中介者模式

Question

我做了一些谷歌搜索，是的，我知道之前在 stackoverflow 和整个网络上已经问过关于这两者之间区别的问题。但我主要是找到措辞明确的答案，这可能会造成混淆。

我的问题是这里是否有人可以为我提供调解者模式和观察者模式的两个可视化示例，以清楚地说明两者之间的区别。在Javascript中。谢谢!

Answer 1

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

观察者

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

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

每个 View 的行为有点像这样:

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 的各个部分，可能是 View )都会向中介注册。然后它成为代码中的一个地方，以在过程中实现与状态管理相关的所有逻辑。

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

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