Question

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

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

Answer 1

是的，它们是截然不同的。我将基于典型的单页Web应用程序场景，通过现实生活中的示例进行解释。我假设您的网页遵循典型的模型 - 视图 - XXX模式，因此您将拥有＆＃34;视图＆＃34;在上面。通过视图我理解一个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。

观察者模式与中介模式

1 个答案: