Разница между навязчивым и ненавязчивым JavaScript

Вопрос: Как сделать JavaScript в разметке "не навязчивым" (unobtrusive)?

Ответ: Чтобы сделать JavaScript менее навязчивым, нужно отделить логику обработки событий от HTML-разметки. Это позволяет улучшить читаемость и облегчить поддержку кода. Пример на обтягивающем (obtrusive) и не обтягивающем (unobtrusive) подходах:

Обтягивающий подход (Obtrusive):

<div onclick="alert('obtrusive')">Information</div>

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

Не обтягивающий подход (Unobtrusive):

<div id="informationHeader">Information</div>

document.getElementById('informationHeader').addEventListener('click', (e) => alert('unobtrusive'));

Здесь код JavaScript отделен от HTML-разметки. Обработчик события добавляется с помощью JavaScript, что упрощает изменения в будущем и делает код более модульным.

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

Я больше не поддерживаю это, так как это было актуально в 2011 году, но, возможно, уже не в 2018 и последующих годах.

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

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

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

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

В дополнение к ответу Майка: использование UJS (Unobtrusive JavaScript) подразумевает, что поведение добавляется "позже".

<div id="info">Информация</div>

... и так далее ...

// В подключаемом JS файле и т.д., в стиле jQuery.
$(function() {
    $("#info").click(function() { alert("не навязчиво!"); });
});

UJS также может подразумевать мягкую деградацию (мой любимый подход), например, предоставление альтернативного способа доступа к функциональности клика по #info, возможно, через аналогичную ссылку. Другими словами, что произойдет, если JavaScript отключен, или если я использую экранный считыватель и т.д.

Вопрос о том, что такое unobtrusive JavaScript, действительно заслуживает внимания. В первую очередь, стоит отметить, что этот подход почти незаметен с точки зрения пользователя; он не навязывает себя и не вмешивается в работу сайта. Если JavaScript отключен в настройках браузера, сайт по-прежнему должен функционировать. Хотя, возможно, он не будет таким "красивым" для пользователей с отключенным JS, они все равно смогут получить доступ к контенту, используя экранные программы чтения, клавиатуру и другие инструменты доступности.

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

Другим важным аспектом "unobtrusive" является "разделение ответственности". Это важно для программистов, хотя пользователи этого не замечают. Тем не менее, такой подход помогает предотвратить вмешательство JavaScript в пользовательский опыт. С точки зрения программиста, избегание встроенных скриптов делает разметку более аккуратной и удобной для поддержания. Также облегчает отладку, так как код не разбросан по множеству встроенных обработчиков событий.