Как правильно интегрировать JS и HTML?

Question

[Дмитрий Ларин]

Как более правильно, "красиво" писать код JS. На примере jQuery.
Так:
<button id="click">Кнопка</button>

$('document').ready(function(){
$('#click').click(function(){
console.log(123);
})
})

+
HTML не перегружен кодом
-
В большом проекте сложно искать зависимости

Или так:
<button onclick="click()">Кнопка</button>

function click(){
console.log(123);
}

+
сразу понятно кто что запускает
-
перегружен HTML

Comments

[iBird Rose]

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

Answer 1

[Alexander Litvinenko]

на самом деле смотря как вы пишите, тут судя по всему у вас самый примитивный вариант верски, для него инлайн ивенты(onclick="click()") применяються только в крайнем случае, так как не очевидны в коде.

а еще не применяете алерт, это же блокирующая операция.

Comments

[Дмитрий Ларин]

алерт тут исключительно для примера.

[Alexander Litvinenko]

Дмитрий Ларин, консоль.лог юзайте для примера.

Answer 2

[OKyJIucT]

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

Comments

[Дмитрий Ларин]

Проект вели 5 разрабов в разное время и сейчас около 20 js файлов по 1000-1500 строк. Как искать где находится тот код?

[OKyJIucT]

Дмитрий Ларин, в браузере смотреть "слушателей" элемента.

[kulaeff]

Дмитрий Ларин Поиск по проекту в IDE вам в помощь. Плюс я добавляю элементу дополнительный класс с префиксом js-. Например, js-click. Это говорит о том, что на этот элемент навешан какой-то обработчик в коде. Достаточно сделать поиск по js-click и вуаля.

[Дмитрий Ларин]

OKyJIucT, Большое человеческое спасибо. Надо будет найти хороший гайд. Сколько лет пользуюсь про эту фичу не знал.
kulaeff, увы не все проекты ide может переварить. Иногда события навешиваются уж по совсем странным путям. js-click кстати хорошая мысль, спасибо

Answer 3

[Exploding]

Зато во втором варианте - не будет "удвоения/х4/х8/..." слушателей и "почему не работает код когда я использую аякс".

Answer 4

[dom1n1k]

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