Шаблон наблюдателя vs шаблон посредника

Я сделал некоторые googling и да, я знаю, что вопросы о разнице между этими двумя были заданы раньше на stackoverflow и во всем интернете. Но в основном я нахожу сформулированные ответы, которые могут сбивать с толку.

мой вопрос в том, может ли кто-нибудь здесь предоставить мне два визуальных примера паттернов медиатора и наблюдателя, которые могут четко продемонстрировать разницу между ними. в JavaScript. Спасибо!

6
javascript mediator observer-pattern

1 ответов

Да, они отличаются. Я объясню на примерах из реальной жизни, основываясь на типичном одностраничном сценарии веб-приложения. Я предполагаю, что ваша веб-страница следует типичному шаблону 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;
    }

}

когда ваша страница инициализируется, все участники (различные части пользовательского интерфейса, возможно, представления) регистрируются с посредником. Затем он становится единственным местом в коде для реализации всей логики, связанной с управлением состоянием во время процедуры.

Примечание: приведенный выше код предназначен только для демонстрационных целей и требует немного больше для реального производства. Наиболее в книгах также не просто так используются конструкторы функций и прототипы. Я просто пытался передать минимум идей, стоящих за этими шаблонами.

эти шаблоны, конечно, легко применимы и на среднем уровне, например, на основе узла.js.

7