Шаблон Javascript: обработчик условных событий

Question

Учитывая, например, некоторый экземпляр класса имеет состояние (например, «активный», «неактивный»,…). Экземпляр также прикрепляет событие click к, например, ссылка, но обработчик события делает что-то другое в зависимости от состояния экземпляра.

Псевдокод:

IF instance state IS 'active' AND link is clicked THEN call function A
IF instance state IS 'inactive' AND link is clicked THEN call function B
…

Мне интересно, что считается хорошей практикой для надлежащего рассмотрения этого дела:

• Какие паттерны обычно используются для достижения этой цели?
• Используете ли вы условное в обработчике событий?
• Или являются обработчиками привязки и отмены привязки при изменении состояния?
• Я упускаю какое-то очевидное другое / лучшее решение?

---

UPDATE

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

Мне нравится подход @ J-P, поскольку он сохраняет соединение метода и состояния отдельно, что кажется более масштабируемым и поддерживаемым, чем простое выражение switch или if/else. Тем не менее, мне было бы очень интересно услышать, если это решается по-другому в другом месте, может быть, используя пример из другого языка?

Answer 1

Какие паттерны обычно используются для достижения этого ? Что-то вроде это
Используете ли вы условное в обработчике событий ? Да, смотрите пример
Или являются обработчиками привязки и отмены привязки при изменении состояния ? Нет, но это возможно.
Я упускаю какое-то очевидное другое / лучшее решение ? Я так не думаю

Answer 2

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

Я думаю, что проверка условий в обработчике событий является более простой, централизованной и более сложной.последовательный подход, чем связывание / открепление обработчиков событий.Я часто использую событие sitewide click, которое проверяет некоторые пользовательские данные, связанные с элементом HTML, чтобы определить ход действий.

Как и в вашем примере, одно из этих действий - "ничего не делать", напримерЯ установил флаг, который указывает, что он был отключен.Другой вариант - удалить обработчик кликов.Но для этого требуется больше кода, и это означает, что управление кодом было разделено: тогда как раньше он был полностью в обработчике кликов, теперь он в обработчике кликов, и что-то еще, что добавляет или удаляет событие.

Если обработчик событий оказывает какое-либо ощутимое влияние на производительность при привязке к пользовательскому интерфейсу, возможно, вы захотите пересмотреть это, но я не могу придумать много ситуаций, когда это произойдет.

Answer 3

Я бы оставил тот же обработчик и вызвал бы соответствующий метод внутри.

var Foo = (function(){

    function Foo() {

        this.state = 'active';

    }

    Foo.methodMapping = {
        active: 'a',
        inactive: 'b'
    };

    Foo.prototype = {

        a: function(){}.
        b: function(){},

        handler: function(el) {

            // This'll handle the event, I guess
            // (Assuming `this` refers to instance, not element)

            var state = this.state;
            if (state in Foo.methodMapping) {
                return this[Foo.methodMapping[state]].apply(this, arguments);
            } else {
                // (prob don't need to cover this case)
            }

        }

    };

    return Foo;

}());

Answer 4

Вы можете использовать какой-то диспетчер:

$link.on('click', function () {
  (state ? A : B).call();
});

Answer 5

ID говорит, что вы просто проверьте событие клика. Затем в событии click проверьте состояние экземпляра

link.live('click', function() {
 switch(instance.state){
  case 'active': function A(); break;
  case 'inactive': function B(); break;
 }     
}