JQuery: лучшее место для размещения обработчиков тегов html

Question

Где вы лично предпочитаете размещать обработчики тегов html на HTML-странице на основе JQuery и почему: элемент тега html или функция document.ready?

<a onclick="javascript:foo()" />

...

function foo() { 
...
}

или

<a id="mytag" />

...

$(document).ready(function() {
  $("#mytag").click(function() { ... });
})

Заранее спасибо!

Answer 1

Версия с обработчиком внутри $(document).ready лучше.1) код использует локальные , а не глобальные функции.Это быстро, и вы можете получить доступ к локальным переменным, объявленным внутри $(document).ready функций. 2) Вы уверены, что код функции onclick загружен до того, как пользователь сможет щелкнуть по нему.3) Лучше с точки зрения дизайна.

Answer 2

Определенно второй, гораздо легче поддерживать код, когда эти две части разделены.Также выглядит некрасиво;)

Answer 3

для лучшей практики, во внешних файлах .js, содержащих функции

function handleClick()
{
  $(element).click(function(e){});
}

// then call them on DOM ready with $(function(){}), this is an alternative provided by jquery equivalent to $(document).ready()

$(function(){ handleClick(); });

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

Так почему бы не встроить? Сложнее управлять, навязчиво и легче взломать (проще взломать, я имею в виду не так много хлопот или неудобств для взлома, как я могу легко изменить DOM с помощью Firebug) по сравнению со сжатым внешним файлом JS.

Answer 4

Второй, потому что он разделяет содержание и логику.Вы никогда не должны смешивать контент (для этого и нужен HTML), презентацию (для этого нужен CSS) и логику (для этого и нужен JavaScript).