var data = {
  name: 'Bob',
  age: 33,
  props: {
    sex: 'male',
    email: 'bob@male.ru'
  }
}
          

    var template = `
    

      
{{name}}: {{age}}
      
    
    `;
              

                

                    
Bob: 33
                    
                  
                

Наблюдатель — поведенческий шаблон проектирования. Создает механизм у класса, который позволяет получать экземпляру объекта этого класса оповещения от других объектов об изменении их состояния, тем самым наблюдая за ними.

Данный шаблон часто применяют в ситуациях, в которых отправителя сообщений не интересует, что делают получатели с предоставленной им информацией.

IObservable {
  addObserver(event, handler)
  removeObserver(event, handler)
  notifyObserver(event, data)
}
            

EventTarget {
  addEventListener(event, handler)
  removeEventListener(event, handler)
  dispatchEvent(event)
}
            

              function ButtonsComponent(eventTarget, element) {
                document.querySelector(element).addEventListener('click', (ev) => {
                  if (!ev.target.matches('button')) {
                    return;
                  }
                  eventTarget.trigger('anyString', ev.target.innerHTML);
                });
              }
                          

              function InfoComponent(eventTarget, element) {
                var infoBlock = document.querySelector(element);
                eventTarget.on('anyString', (data) => infoBlock.innerHTML = data);
              }
                            

              var eventTarget = new EventTarget();
              var buttonsComponent = new ButtonsComponent(eventTarget, '.buttons');
              new InfoComponent(eventTarget, '.info');

              var eventTarget2 = new EventTarget();
              var buttonsComponent2 = new ButtonsComponent(eventTarget2, '.buttons2');
              new InfoComponent(eventTarget2, '.info2');
                              

Посредник (англ. Mediator) — поведенческий шаблон проектирования, обеспечивающий взаимодействие множества объектов, формируя при этом слабую связанность и избавляя объекты от необходимости явно ссылаться друг на друга.

Проблема
Обеспечить взаимодействие множества объектов, сформировав при этом слабую связанность и избавив объекты от необходимости явно ссылаться друг на друга.

Решение
Создать объект, инкапсулирующий способ взаимодействия множества объектов.

Преимущества
Устраняется связанность между "Коллегами", централизуется управление.

"Посредник" определяет интерфейс для обмена информацией с объектами "Коллеги", "Конкретный посредник" координирует действия объектов "Коллеги". Каждый класс "Коллеги" знает о своем объекте "Посредник", все "Коллеги" обмениваются информацией только с посредником, при его отсутствии им пришлось бы обмениваться информацией напрямую. "Коллеги" посылают запросы посреднику и получают запросы от него. "Посредник" реализует кооперативное поведение, пересылая каждый запрос одному или нескольким "Коллегам".

IEventBus {
  on(event, handler)
  off(event, handler)
  trigger(event, data)

  once(event, data)
}
            

var eventBus = new EventBus();

// module 1
eventBus
  .on('city:changed', (cityName) => console.log(`New city: ${cityName}`));

// module 2 
eventBus
  .trigger('city:changed', 'Minsk');
            

                var eventBus = new EventBus();
                var buttonsComponent = new ButtonsComponent(eventBus, '.buttons');
                new InfoComponent(eventBus, '.info');
  
                new InfoComponent(eventBus1, '.info2');
                                

Обработчик URL - называется роутером ( Router) Роутер определяет какой код должен выполняться в зависимости от адреса. Логика роутера может быть завязана на параметры.

• Pilot: многофункциональный JavaScript роутер
• Роутер на JavaScript
• A modern JavaScript router in 100 lines
• A simple minimalistic JavaScript router with a fallback for older browsers.
• router.js

IRoute {
  [name]
  [match]
  onEnter([data])
  onLeave([data])

  onBeforeEnter([data])
}
            

/* match */ String | RegExp | function
            

          Router = {
            routes: [
              {
                name: 'index',
                match: '',
                onBeforeEnter: () => console.log('onBeforeEnter index'),
                onEnter: () => console.log('onEnter index'),
                onLeave: () => console.log('onLeave index')
              },
              {
                name: 'city',
                match: /city=(.+)/,
                onBeforeEnter: (city) => console.log(`onBeforeEnter city:${city}`),
                onEnter: (city) => console.log(`onEnter city:${city}`),
                onLeave: (city) => console.log(`onLeave city:${city}`)
              },
              {
                name: 'about',
                match: (text) => text === 'about',
                onBeforeEnter: () => console.log(`onBeforeEnter about`),
                onEnter: () => console.log(`onEnter about`),
                onLeave: () => console.log(`onLeave about`)
              }
            ]
          }

// Зашел на главную
// onBeforeEnter index
// onEnter index

// Ввел адрес в форму
// onLeave index
// onBeforeEnter city:Minsk
// onEnter city:Minsk

// About
// onLeave city:Minsk
// onBeforeEnter about
// onEnter about

IRouter {
  add(route[, force])
  remove(route)
  removeByName(name)

  go(name, params)
}
            

IRouter2 {
  on(match, handler)
}