Михаил Давыдов — JavaScript: События
0 likes2,855 views
Документ описывает различные паттерны работы с событиями в JavaScript, включая pubsub, event emitter и event manager. Приводятся примеры реализации этих паттернов и обсуждаются особенности работы с событиями, такие как делегирование, прерывание всплытия и фильтрация событий. Также рассматриваются проблемы использования событий, включая накладные расходы и возможности оптимизации.
![PubSub – пример
var PubSub = function () {
this.readers = [];
};
PubSub.prototype = {
pub: function (data) {},
sub: function (callback) {},
unsub: function (callback) {}
};
// function callback(data) {}
5](https://image.slidesharecdn.com/davidofjs-events-130124091707-phpapp01/85/JavaScript-5-320.jpg)
![Event Emitter – пример
var EventEmitter = function () {
// events = {"event_name": []};
this.events = {};
};
EventEmitter.prototype = {
emit: function (event, data) {},
on: function (event, callback) {},
off: function (event, callback) {}
};
// function callback(data) {}
9](https://image.slidesharecdn.com/davidofjs-events-130124091707-phpapp01/85/JavaScript-9-320.jpg)
Михаил Давыдов — JavaScript: События
- 4. PubSub • Издатель (Publisher) – Генерирует данные одного типа – Издает только одну газету – Издателей может быть много • Подписчики (Subscribers) – Подписываются на данные издателя – Могут отписаться в любой момент • Данные – поток – Поздно подписался – упустил данные – Объем и частота публикаций задается издателем 4
- 5. PubSub – пример var PubSub = function () { this.readers = []; }; PubSub.prototype = { pub: function (data) {}, sub: function (callback) {}, unsub: function (callback) {} }; // function callback(data) {} 5
- 6. PubSub – особенности • Самая простая реализация • Только 1 тип данных – А хочется еще и "Мурзилку" получать • Нужно напрямую общаться с объектом 6
- 8. Event Emitter • Имеет много названий • Издатель – Генерирует данные разных типов – Издает газеты и журналы – Издателей может быть много • Подписчики – Подписываются на данные любого типа в любом количестве – Могут отписаться в любой момент • Данные – поток – Поздно подписался – упустил данные – Объем и частота публикаций задается издателем 8
- 9. Event Emitter – пример var EventEmitter = function () { // events = {"event_name": []}; this.events = {}; }; EventEmitter.prototype = { emit: function (event, data) {}, on: function (event, callback) {}, off: function (event, callback) {} }; // function callback(data) {} 9
- 10. Event Emitter – особенности • Много разных типов данных • Нужно иметь ссылку на EventEmitter 10
- 11. Event Manager 11
- 12. Event Manager • Имеет много названий • Своеобразная шина данных • Единственный издатель – Генерирует данные разных типов • Подписчики – Подписываются на данные любого типа в любом количестве – Могут отписаться в любой момент • Данные – поток – Поздно подписался – упустил данные – Объем и частота публикаций задается издателем 12
- 13. Event Manager – пример Похож на Event Emitter, но это Синглентон var EventManager = { events: {}, emit: function (event, data) {}, on: function (event, callback) {}, off: function (event, callback) {} }; // function callback(data) {} 13
- 14. Event Manager – особенности • Много разных типов данных • Об этом объекте знают все 14
- 15. Дополнительные фичи Управление событиями, namespace Накопление данных События на дереве DOM Делегирование событий Фильтрация событий
- 16. Их наличие зависит от конкретны задач
- 17. Фичи направлены на управление группами событий и агрегацией
- 18. Управление событиями • Группировка событий – namespace • Легкое удаление событий – Удаление события без callback – Удаление по дескриптору 18
- 19. Управление событиями – пример jQuery 1.8 var handler = function () {}; $('body').on('click.ns', handler); $('body').off('click', handler); // не удобно $('body').off('click'); // все click $('body').off('.ns'); // весь namespace $('body').off(); // все события $('body').off('**'); // все делегированные 19
- 20. Накопление данных • Опоздал с подпиской – ничего не получил – Это не удобно • Пользователь желает получить все – Всю подписку журналов с нуля • Как только подписался – сразу получил • Похоже на Promise 20
- 21. Накопление данных – пример jQuery DOMReady $(function () { $(function () { console.log('Tada!'); }); }); 21
- 22. Накопление данных – пример jQuery Ajax#done var data = $.get('/'); data.done(function () { data.done(function () { console.log('Tada!'); }); }); 22
- 23. DOM события События на DOM дереве Event bubbling Event capturing Не всплывающие события
- 24. Event bubbling • Событие начинается с текущего элемента • Поднимается по DOM дереву • Последний элемент – корень дерева – window или document 24
- 25. Event bubbling <div> <div> <div> *Click* 25
- 26. Event bubbling <div> <div> <div> *Click* 26
- 27. Event bubbling <div> <div> <div> *Click* 27
- 28. Event bubbling <div> <div> <div> *Click* 28
- 29. Event bubbling в jQuery Event bubbling – фаза по умолчанию в jQuery // jQuery 1.7 .on() $('.b-form-button').on('click', function (event) { console.log(this); // .b-form-button element }); // Хэлперы $('.b-form-button').click(function (event) { console.log(event); }); http://api.jquery.com/on/ http://api.jquery.com/category/events/ 29 http://api.jquery.com/category/events/event-object/
- 30. Event bubbling в i-bem Функция bindTo() BEM.DOM.decl('b-form-input', { onSetMod : { 'js' : { 'inited' : function () { this .bindTo(this.elem('input'), { 'focus' : this.onFocus, 'blur' : this.onBlur }); } } } }); http://bem.github.com/bem-bl/sets/common- 30 desktop/i-bem/i-bem.ru.html
- 31. Не всплывающие события • var itBubbles = event.bubbles;! • Специфичные события для 1 элемента – submit, focus, blur, load, unload, change, reset, scroll • Некоторые события мутаций DOM – DOMFocusIn, DOMFocusOut, DOMNodeRemoved https://developer.mozilla.org/en-US/docs/ 31 Mozilla_event_reference
- 32. Особенности • Фазы Capturing & Bubbling идут одновременно – Чередуются capturing, bubbling • Каждый обработчик получает новый инстанс объекта Event 32 http://jsfiddle.net/h2nJU/2/
- 33. Делегирование Один обработчик – несколько целей Основа – всплытие событий
- 34. Делегирование <ul> onclick=delegateClick <li class="good"> *Click* <li class="good"> <li class="bad"> 34
- 35. Делегирование – начало события <ul> onclick=delegateClick <li class="good"> *Click* <li class="good"> <li class="bad"> 35
- 36. Делегирование – всплытие события <ul> onclick=delegateClick <li class="good"> *Click* <li class="good"> <li class="bad"> 36
- 37. var isTarget = event.target.classList .contains('good'); 37
- 38. Делегирование <ul> onclick=delegateClick <li class="good"> <li class="good"> <li class="bad"> *Click* 38
- 39. Делегирование – начало события <ul> onclick=delegateClick <li class="good"> <li class="good"> <li class="bad"> *Click* 39
- 40. Делегирование – всплытие события <ul> onclick=delegateClick <li class="good"> <li class="good"> <li class="bad"> *Click* 40
- 41. Событие не произойдет contains('good') === false; 41
- 42. Профит делегирования • Меньше обработчиков событий – Экономия памяти – Меньше утечек памяти • Проще работать с динамическими элементами 42
- 43. Особенности делегирования • Если событие не всплывает – ничего не получится • Нужно максимально ограничивать событие – Необходимо выбрать наиболее близкого делегата • Возможны частые ложные вызовы события – Большие затраты на вызов функции • Ограничить делегирование у частых событий – mousemove • Не использовать делегирование если элемент 1 43
- 44. Делегирование в jQuery // jQuery 1.7+ .on() $('.b-container') .on('click', '.b-item', function (event) { console.log(this); // .b-item }); // jQuery 1.3+ $('.b-item') .live('click', function (event) { console.log(this); // .b-item }); // === $(document).on('click', '.b-item') http://api.jquery.com/on/ 44 http://api.jquery.com/live/
- 45. Управление DOM событием Прерывание всплытия Прерывание действия по умолчанию
- 46. Прерывание всплытия • event.stopPropagation() – Прерывает всплытие события по дереву • event.stopImmediatePropagation() – Прерывает всплытие события по дереву – Отменяет прочие обработчики http://www.w3.org/TR/DOM-Level-2-Events/ 46 events.html#Events-Event-stopPropagation
- 47. 47
- 48. Прерывание действия по умолчанию • Действие по умолчанию – Переход по ссылке – Раскрытие <select> – Сабмит формы – Фокус в инпут – Снятие фокуса • event.preventDefault() – Перерывает это действие • Некоторые действия прервать нельзя – var isCanPrevent = event.cancelable; – resize, scroll, focus, error, load, unload, DOM*, … https://developer.mozilla.org/en-US/docs/DOM/ 48 event.preventDefault
- 49. Прерывание событий jQuery $('.b-link').click('click', function (event) { return false; // preventDefault+stopPropagation }); $('.b-form').click('submit', function (event) { return isValid(this); // this - .b-form }); $('.b-link').click('click', function (event) { event.preventDefault(); event.stopPropagation(); }); http://api.jquery.com/on/ 49 http://api.jquery.com/live/
- 50. Фильтрация событий debounce, throttle http://benalman.com/projects/jquery-throttle- debounce-plugin/
- 51. Бывает, что событий очень много, а обрабатывать каждое дорого
- 52. throttle • Фильтрация частоты сообщений • Событие вызывается не чаще чем раз в N миллисекунд 52
- 53. $.throttle(timeout, callback, no_trailing); 53
- 54. $.throttle no_trailing=false Поток событий Пауза no_trailing=true Пауза Допущенные события 54
- 55. $.throttle var log = $.throttle(250, function () { console.log(arguments); }); $(window).scroll(log); $(window).off('scroll', log); http://benalman.com/code/projects/jquery-throttle- 55 debounce/examples/throttle/
- 56. debounce • Склеивает вызовы в один • Событие вызывается только после паузы в N милисекунд 56
- 57. $.debounce(timeout, callback, at_begin); 57
- 58. $.debounce at_begin=false Пауза at_begin=true Пауза 58
- 59. $.debounce function suggest(event) {}; $('input').keyup(suggest); $('input').keyup($.debounce(250, suggest)); $('input').unbind('keyup', suggest); http://benalman.com/code/projects/jquery-throttle- 59 debounce/examples/debounce/
- 61. События это круто – давайте везде использовать!!1!
- 62. Событие геттер Вариант не удачного использования событий DataObject.on('someData', function (data) { console.log(data); }); DataObject.trigger('giveMe:someData'); 62
- 63. Y U NO 63 DataObject.someData
- 64. События – поток. Их лучше использовать как поток данных 64
- 65. Module A Module B 65
- 66. Data C Module A Module B 66
- 67. Data C Module A Module B Give me C 67
- 68. Data C Data C' Module A Module B Give me C 68
- 69. Data C Data C' Module A Module B Give me C 69
- 70. Data C Data C Module A Module B 70
- 71. Накладные расходы • Событие – функция – n объектов, k ресурсов = n*k функций – функция занимает ресурсы – лишние скоупы, сборка мусора и JIT-компиляция – вызов кучи функций – утечки памяти 71
- 73. Не блокирующий I/O • Дефрагментация времени блокировок – Более плотная загрузка процесса • Выгодно применять, когда время I/O больше времени обработки данных • Меньше проблем с разделяемой памятью 73
- 74. Слабое связывание • Элементы не знают о программе • Элементы общаются только событиями • Меньше разделенной памяти – Меньше проблем синхронизации 74
- 75. trigger(message)! on(message, callback)! 75
- 76. Заключение • События – PubSub – Event Emitter – Event Manager • Фичи событий – namespace – накопление данных • DOM события – Event Bubbling – Делегирование – Прерывание события – Отмена действия по умолчанию • Фильтрация 76
- 77. Михаил Давыдов Разработчик JavaScript azproduction@yandex-team.ru azproduction 77 Спасибо