Ненавязчивый Javascript запутывает обработку событий

Question

Вы знаете, что мне больше всего понравилось в навязчивом JavaScript? Вы всегда знали, что он собирается делать, когда вызывали событие.

<a onclick="thisHappens()" />

Теперь, когда все пьют ненавязчивую помощь, это не так очевидно. Вызовы для привязки событий могут происходить в любой строке любого числа файлов JavaScript, которые включаются на вашей странице. Это не может быть проблемой, если вы являетесь единственным разработчиком, или если у вашей команды есть какое-то соглашение для привязки обработчиков событий, как всегда использование определенного формата класса CSS. Однако в реальном мире трудно понять ваш код.

Кажется, что DOM-браузеры, такие как Firebug, могут помочь, но все же требуется много времени, чтобы просмотреть все свойства обработчика событий элемента, чтобы найти тот, который выполняет код, который вы ищете. Даже тогда обычно он говорит, что это анонимная функция () без номера строки.

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

Должен быть более быстрый способ выяснить, что происходит, когда я нажимаю на элемент. Может кто-нибудь, пожалуйста, просветите меня?

Answer 1

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

Answer 2

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

$('body').click(function(){ alert('test' )})

var foo = $('body').data('events');
// you can query $.data( object, 'events' ) and get an object back, then see what events are attached to it.

$.each( foo.click, function(i,o) {
    alert(i) // guid of the event
    alert(o) // the function definition of the event handler
});

Или вы можете реализовать свою собственную систему событий.

Answer 3

Чтобы ответить на ваш вопрос, попробуйте использовать командную строку Firebug. Это позволит вам использовать JavaScript для быстрого захвата элемента по идентификатору, а затем перебирать его слушателей. Часто при использовании с console.log вы даже сможете получить определения функций.

---

Теперь, чтобы защитить ненавязчивого:

Преимущество, которое я нахожу в ненавязчивом JavaScript, заключается в том, что мне намного легче увидеть DOM таким, какой он есть. Тем не менее, я чувствую, что, как правило, плохая практика - создавать анонимные функции (за небольшим исключением). (Самая большая ошибка, которую я нахожу с JQuery, на самом деле заключается в их документации. Анонимные функции могут существовать в мире преград, где сбой не приводит к полезному выводу, хотя JQuery сделал их стандартными.) Обычно у меня есть политика использования только анонимных функций если мне нужно использовать что-то вроде bindAsListener из Prototype.

Кроме того, если файлы JS правильно разделены, они будут адресованы только одному подмножеству DOM одновременно. У меня есть библиотека "упорядоченный флажок", она находится в только одном файле JS, который затем повторно используется в других проектах. Я также обычно использую все методы данной библиотеки в качестве методов-членов объекта JSON или класса, и у меня есть один объект / класс на файл js (как если бы я делал все на более формализованном языке ). Если у меня возникнет вопрос о моем «коде проверки формы», я посмотрю на объект formValidation в formvalidation.js.

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

В конце концов, я бы предпочел использовать /* */, чтобы закомментировать большинство из двух или трех файлов js, чтобы найти некорректно работающий код, а затем просмотреть HTML-код и удалить атрибуты onclick.

Answer 4

Одна вещь: вы не должны быть в состоянии увидеть, что произойдет в JavaScript, посмотрев HTML-код. Что это за неприятность? HTML для структуры.

Если вы хотите проверить, какие события связаны с определенными элементами, на данный момент есть букмарклет, называемый визуальное событие, и Firebug 1.6 (IIRC) будет иметь своего рода инспектор событий.

Answer 5

Называть это "kool-aid" кажется несправедливым. События DOM Level 2 решают конкретные проблемы с встроенной обработкой событий, такие как конфликты, которые всегда возникают. Я не оглядываюсь назад на написание кода для использования window.onload, который должен проверять, назначил ли его кто-то еще раньше, и иногда перезаписывать его случайно или из-за небрежности. Это также обеспечивает лучшее разделение слоев структуры (HTML) и поведения (JS). В общем, это хорошо.

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