观察者模式与中介模式 [英] Observer Pattern vs Mediator Pattern

问题描述

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

I did some googling and yes I know that questions about the difference between these two has been asked before on stackoverflow and all over the web. But I mostly find worded answers, which can be confusing.

我的问题是，如果有人可以请我提供两个中介和观察者模式的视觉示例，可以清楚地展示两者之间的差异。在Javascript中。谢谢！

My question is if anyone here can please provide two visual examples of both the mediator and observer patterns for me that can clearly demonstrate the difference between the two. In Javascript. Thank you!

推荐答案

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

Yes, they are distinct. I will explain by examples from real life, based on a typical single-page web application scenario. I am assuming your web page follows typical Model-View-XXX pattern, therefore you would have "views" on it. By view I understand a javascript component responsible for visual representation and associated logic of some part of your page - header, image list, breadcrumbs are all typical views.

观察者

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

Best used for single objects with great impact on overall site functionality. Typical example would be user settings or site configuration.

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

其中每个视图的行为都是这样的：

where each view would behave somewhat like this:

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

调解员

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

Best used when multiple parts of your site need to be orchestrated by certain logic. If you end up tracing a single user action through multiple callbacks and end up passing state via events, it probably makes sense to introduce mediators. There would be one mediator per workflow. A concrete example would be a photo upload.

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注册。然后它成为代码中的一个位置，以在过程中实现与状态管理相关的所有逻辑。

When your page is initializing, all actors (various parts of the UI, possibly views) register with mediator. It then becomes a single place in the code to implement all the logic related to state management during the procedure.

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

Note: the code above is for demo purposes only, and needs a bit more for real production. Most books also use function-constructors and prototypes for a reason. I just tried to convey the bare minimum of the ideas behind those patterns.

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

These patterns are, of course, easily applicable on the middle tier too, e.g. based on node.js.

这篇关于观察者模式与中介模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！