"Переход от коллбеков к событиям"

Веретенников А.Семаков И.

Задача: разработать frontend-часть для нового проекта заказчика

Public API

Backend FrontendAJAX

Задача: разработать frontend-часть для нового проекта заказчика

Frontend

Задача: разработать frontend-часть для нового проекта заказчика

Пути решения

Callback

Задача: разработать frontend-часть для нового проекта заказчика

Пути решения

Event-driven

Задача: разработать frontend-часть для нового проекта заказчика

Пути решения

Callback Event-driven

?

CallbackСначала все выглядит вот так

Component_1 = { update : function( callback ){ callback() }, reset : function( callback ){ callback() }};

Component_2 = { business : function(){ Component_1.update(Component_2.callback); }, callback : function(){ ... }};

CallbackПоявляются новые требованияComponent_1 = { update : function( callback ){ callback() }, reset : function( callback ){ callback() }};

Component_2 = { business : function(){ Component_1.update(Component_2.callback); }, callback : function(){ ... }};

Component_3 = { business : function(){ Component_1.reset(Component_3.callback); }, callback : function(){ ... }};

Callback... и еще:Component_1 = { update : function( callback ){ callback() }, reset : function( callback ){ callback() }};

Component_2 = { business : function(){ Component_1.update(Component_2.callback); }, callback : function(){ ... }};

Component_3 = { business : function(){ Component_1.reset(Component_3.callback); }, callback : function(){ ... }};

Component_4 = { business : function(){ Component_2.business(); }};

Callback.. а в итоге получаем

Callback

Хорошо работают на несложных проектах

Слабая гибкость из-за постоянно возрастающих зависимостей

Event-driven. Теория

Event-driven. Теория

<ОБРАЗЕЦ КОДА>

Event-driven. Практика

С точки зрения кода Manager - тот же Module

В нашем случае, часть функций менеджера выполняется jQuery

Другая часть выполняется одним из компонентов

Manager "размазало" по коду :)Но дискомофорта из-за этого не испытываем

Event-driven. Практика

Шина

Непосредственно на компоненте

Специально созданный объект (proxy)

Генерируем сразу на компоненте.Избавились от посредников

Вызов событий

Event-driven. Практика

События привязаны к компонентам.

Некоторые события существуют вне компонентов (один элемент - один эвент - несколько компонентов)

Разные компоненты могут вызывать один и тот же эвент

Проблема зоны видимости событий

Event-driven. Практика

Каждому источнику - уникальное событие

Передавать источник события

Источник события — параметр события

Кто вызвал событие на компоненте?

Event-driven. Практика

Получатель - не всегда источник.

Каждому получателю - уникальное событие

Передавать получателя

Получатель события - параметр события

Для кого предназначено событие?

Event-driven. Практика

Как быть с дефолтными событиями?

Как быть с событиями конкретных компонентов?

Что делать с общими событиями?

Имена события - параметризуемые.

Проблема именования событий

Event-driven. Практика

Событие предназначено для связывания компонентов

Компонент слушает сам себя

Кто кого: метод вызывает событие или же событие вызывает метод?

Проблемы внутри компонента

Event-driven. Итоги

Одинаково работают на любых проектах

Меньше зависимостей, больше гибкости

Лучшая отказоустойстойчивость

Сложность восприятия

Забыть нельзя использовать