观察者模式与中介模式

Question

我做了一些谷歌搜索，是的，我知道关于这两者之间的区别的问题以前在堆栈溢出和整个网络上都被问过。但我大部分都找到了措辞清晰的答案，这可能会让人感到困惑。

我的问题是，在座的任何人能否为我提供两个关于调解人和观察员模式的直观例子，以清楚地说明两者之间的区别。在Javascript里。谢谢!

Answer 1

是的，它们是不同的。我将在一个典型的单页web应用场景的基础上，通过现实生活中的例子来解释。我假设您的网页遵循典型的模型-视图-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。