觀察者模式與中介模式

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

}

當您的頁面初始化時，所有actor（UI的各個部分，可能是視圖）都會向mediator注冊。 然后，它成為代碼中的單個位置，以在過程期間實現與狀態管理相關的所有邏輯。

注意：上面的代碼僅用於演示目的，並且需要更多的實際生產。 大多數書籍也使用函數構造函數和原型。 我只是試圖傳達這些模式背后的最低限度的想法。

當然，這些模式也很容易適用於中間層，例如基於node.js.