SECON'2014 - Антон Веретенников, Илья Семаков - Переход от коллбеков к событиям
Download as PPTX, PDF0 likes300 views
Документ рассматривает переход от коллбеков к событийной модели в разработке frontend-части для нового проекта. Обсуждаются плюсы и минусы использования callback и event-driven подходов, включая гибкость, зависимости и практические примеры кода. В результате подчеркивается необходимость уникального именования событий и управления зависимостями для достижения большей эффективности и отказоустойчивости.
SECON'2014 - Антон Веретенников, Илья Семаков - Переход от коллбеков к событиям
- 1. "Переход от коллбеков к событиям" Веретенников А. Семаков И.
- 2. Задача: разработать frontend-часть для нового проекта заказчика Public API BackendFrontend AJAX
- 3. Задача: разработать frontend-часть для нового проекта заказчика Frontend
- 4. Задача: разработать frontend-часть для нового проекта заказчика Пути решения Callback
- 5. Задача: разработать frontend-часть для нового проекта заказчика Пути решения Event-driven
- 6. Задача: разработать frontend-часть для нового проекта заказчика Пути решения Callback Event-driven ?
- 7. Callback Сначала все выглядит вот так Component_1 = { update : function( callback ){ callback() }, reset : function( callback ){ callback() } }; Component_2 = { business : function(){ Component_1.update(Component_2.callback); }, callback : function(){ ... } };
- 8. 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(){ ... } };
- 9. 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(); } };
- 10. Callback .. а в итоге получаем
- 11. Callback Хорошо работают на несложных проектах Слабая гибкость из-за постоянно возрастающих зависимостей
- 14. Event-driven. Практика С точки зрения кода Manager - тот же Module В нашем случае, часть функций менеджера выполняется jQuery Другая часть выполняется одним из компонентов Manager "размазало" по коду :) Но дискомофорта из-за этого не испытываем
- 15. Event-driven. Практика Шина Непосредственно на компоненте Специально созданный объект (proxy) Генерируем сразу на компоненте. Избавились от посредников Вызов событий
- 16. Event-driven. Практика События привязаны к компонентам. Некоторые события существуют вне компонентов (один элемент - один эвент - несколько компонентов) Разные компоненты могут вызывать один и тот же эвент Проблема зоны видимости событий
- 17. Event-driven. Практика Каждому источнику - уникальное событие Передавать источник события Источник события — параметр события Кто вызвал событие на компоненте?
- 18. Event-driven. Практика Получатель - не всегда источник. Каждому получателю - уникальное событие Передавать получателя Получатель события - параметр события Для кого предназначено событие?
- 19. Event-driven. Практика Как быть с дефолтными событиями? Как быть с событиями конкретных компонентов? Что делать с общими событиями? Имена события - параметризуемые. Проблема именования событий
- 20. Event-driven. Практика Событие предназначено для связывания компонентов Компонент слушает сам себя Кто кого: метод вызывает событие или же событие вызывает метод? Проблемы внутри компонента
- 21. Event-driven. Итоги Одинаково работают на любых проектах Меньше зависимостей, больше гибкости Лучшая отказоустойстойчивость Сложность восприятия