Ненавязчивый JavaScript

Стиль этой статьи неэнциклопедичен или нарушает нормы литературного русского языка. Статью следует исправить согласно стилистическим правилам Википедии. (2 января 2016)

Ненавязчивый JavaScript (англ. unobtrusive JavaScript) — подход к web-программированию на языке JavaScript. Термин введён в 2002 году Стюартом Лэнгриджем^[1]. Под принципами ненавязчивого JavaScript обычно понимают следующее:

• отделение функциональности веб-страницы («уровень поведения») от структуры, содержания и представления её же^[2];
• наработанные методы по избежанию проблем традиционного программирования на JavaScript (таких, как зависимость от браузера и недостаток масштабируемости);
• техники «постепенного улучшения» (англ. Progressive enhancement) для поддержки пользовательских агентов, которые могут не в полной мере поддерживать функциональность JavaScript^[3].

В разделе не хватает ссылок на источники (см. рекомендации по поиску). Информация должна быть проверяема, иначе она может быть удалена. Вы можете отредактировать статью, добавив ссылки на авторитетные источники в виде сносок. (5 апреля 2015)

Из-за непоследовательной реализации языка и объектной модели документа в браузерах JavaScript имел репутацию языка, непригодного для серьезного использования и разработки, что изменило появление основанных на стандартах веб-браузеров, AJAX и интерфейсов Web 2.0, сделав JavaScript важный инструмент, хотя этот язык программирования когда-то использовался для относительно простых и тривиальных задач, таких как проверка ввода на стороне браузера и декоративные элементы, с тех пор он используется для создания ядра функциональность сайта.

Работоспособность веб-сайта для наиболее широкой аудитории пользователей, включая доступность для пользователей с ограниченными возможностями, является главной целью ненавязчивого подхода. Достижение цели основывается на разделении представления и поведения, при котором поведение программируется с помощью внешних скриптов JavaScript и привязывается к семантической разметке^[4].

За счёт применения ненавязчивого подхода легче достичь следующих результатов^[4]:

• Доступность веб-сайта для большего числа пользователей;
• Гибкость при внесении изменений в документ, стили или скрипты;
• Эксплуатационная надёжность (robustness) и расширяемость, в том числе возможность постепенного улучшения;
• Повышение производительности, например, за счёт кэширования внешних скриптов.

Крис Хейлман (Chris Heilmann), один из сторонников применения ненавязчивого подхода, в 2007 году составил для него семь правил^[4]:

1. Не делайте никаких предположений.
2. Ищите зацепки (hooks) и отношения.
3. Оставьте обход (traversing) экспертам.
4. Понимайте браузеры и пользователей.
5. Имейте представление о событиях.
6. Играйте хорошо с другими.
7. Проявляйте заботу о следующем разработчике.

Традиционно вызовы функций JavaScript размещались непосредственно в разметке документа. Пример ниже иллюстрирует типичную реализацию валидации полей формы:

<input type="text" name="date" onchange="validateDate(this);" /> 

При хорошо структурированном подходе к разработке разметка предназначена для описания структуры документа, но не его поведения. Смешивание структуры и поведения ведёт, среди прочего, к ухудшению поддерживаемости сайта. Происходит это по той же причине, что и в случае смешивания структуры и представления: если сайт содержит сотни полей с данными, добавление соответствующего атрибута onchange к каждому (и модификация их позже в случае необходимости) может оказаться трудоёмкой процедурой.

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

<input type="text" class="validatedDate" /> 

Скрипт может просматривать все элементы input, относящиеся к классу validatedDate и устанавливать для них нужный обработчик:

window.onload = function() {     var inputs, i;     inputs = document.getElementsByTagName('input');     for (i = 0; i < inputs.length; i++) {         if (inputs[i].className == 'validatedDate') {              inputs[i].onchange = function() {                  validateDate();             };         }     } };  function validateDate(){     // логика обработчика } 

Следующий скрипт специфичен для библиотеки JavaScript jQuery:

$(document).ready(function(){  	$('input.validatedDate').bind('change', validateDate); });  function validateDate(){ 	// логика обработчика } 

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

• Johansen, C. Test-Driven JavaScript Development. — Pearson Education, 2010. — 480 p. — ISBN 9780321684059.

• The Web Standards Project. The JavaScript Manifesto  (неопр.). Дата обращения: 5 апреля 2015. Архивировано 4 апреля 2015 года.