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

Question

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

<a onclick="thisHappens()" /> 

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

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

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

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

Answer 1

Если вы используете 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 2

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

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

Answer 3

Отъезд Visual Event ... это букмарклет, который вы можете использовать для публикации событий на странице.

Answer 4

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

---

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

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

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

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

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

Answer 5

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

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