лучшие практики для дизайна страницы с большим количеством событий

Question

Итак, у меня есть сетка на странице, которая отображает табличные данные, с флажком в каждой строке.

Так что в этой ситуации, когда флажок установлен, на странице потенциально может реагировать множество вещей.

Кроме того, если нажать кнопку, на странице снова будет много всего реагировать.

Так, если кто-то отметит флажок, строка должна быть выделена, есть панель инструментов, котораябудет отображать / скрывать кнопки и т. д.

Если кто-то щелкнет непосредственно на панели инструментов, снова сработает то же, что и при нажатии флажка.

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

Затем я могу, основываясь на источнике события, реагироватьподобным или другим способом.

как лучше всего проектировать подобные вещи?

Answer 1

Я думаю, что вы хотите изучить использование Observer Pattern . По сути, заинтересованные стороны подписываются или прослушивают событие на издателе, и когда событие происходит, источник уведомляет об этом всех слушателей.

Answer 2

на ум приходят две вещи:
1. делегирование события (вы не хотите привязывать к каждому входу в сетке) Посмотрите на эту ссылку, чтобы отличным способом сделать это, также поддерживая чистый код: Бен Надель
2. используя пользовательские события, или даже лучше - используйте этот плагин / плагин

у меня в приложении большая сетка, которая со временем развивалась, и ручная привязка к каждому входу + реагирование по-разному приводило к тому, что код становился "немного" уродливым,
Здорово, что ты сейчас идешь туда и готовишься заранее

Answer 3

Мне нравится, как это работает с jquery, поскольку вы можете привязать событие ко многим элементам одновременно.

$("input[type=checkbox]").click(function(e){
    alert(e.currentTarget.id);    
    });

Этот код заставит все флажки оповестить свое имя.Конечно, используя классы css, вы можете связать подмножество всех флажков, чтобы создать действие.

$("input[type=checkbox].cssClass").click(function(e){    
    someOtherFunction(e.currentTarget);
    });

Answer 4

Вы можете попробовать Пользовательские события YUI . Это позволит вам запустить собственное «событие», которое могут услышать слушатели.