Ненавязчивый JavaScript
Стиль этой статьи неэнциклопедичен или нарушает нормы литературного русского языка. |
Ненавязчивый JavaScript (англ. unobtrusive JavaScript) является подходом к web-программированию на языке JavaScript. Термин был введён в 2002 году Стюартом Лэнгриджем[1]. Под принципами ненавязчивого Javascript обычно понимают следующее:
- отделение функциональности веб-страницы («уровень поведения») от структуры, содержания и представления Web-страницы[2];
- наработанные методы по избежанию проблем традиционного программирования на JavaScript (таких, как зависимость от браузера и недостаток масштабируемости);
- техники «постепенного улучшения» (англ. Progressive enhancement) для поддержки пользовательских агентов, которые могут не в полной мере поддерживать функциональность JavaScript[3].
Предпосылки появления
В разделе не хватает ссылок на источники (см. также рекомендации по поиску). |
Из-за несовместимых реализаций языка и Document Object Model в различных браузерах JavaScript имел репутацию языка, непригодного для серьёзного применения и развития. Появление веб-браузеров, придерживающихся стандартов, появление интерфейсов AJAX и Веб 2.0 изменило ситуацию, сделав JavaScript необходимым инструментом. Если раньше JavaScript использовался для относительно простых и несущественных задач, таких как проверка ввода на стороне браузера и декоративные элементы, то в дальнейшем он стал применяться для создания основной функциональности сайта.
Цели
Работоспособность веб-сайта для наиболее широкой аудитории пользователей, включая доступность для пользователей с ограниченными возможностями, является главной целью ненавязчивого подхода. Достижение цели основывается на разделении представления и поведения, при котором поведение программируется с помощью внешних скриптов JavaScript и привязывается к семантической разметке[4].
За счёт применения ненавязчивого подхода легче достичь следующих результатов[4]:
- Доступность веб-сайта для большего числа пользователей;
- Гибкость при внесении изменений в документ, стили или скрипты;
- Эксплуатационная надёжность (robustness) и расширяемость, в том числе возможность постепенного улучшения;
- Повышение производительности, например, за счёт кеширования внешних скриптов.
Рекомендации
Крис Хейлман (Cris Heilmann), один из сторонников применения ненавязчивого подхода, составил для него в 2007 семь правил[4]:
- Не делайте никаких предположений;
- Ищите зацепки (hooks) и отношения;
- Оставьте обход (traversing) экспертам;
- Понимайте браузеры и пользователей;
- Имейте представление о событиях;
- Играйте хорошо с другими;
- Проявляйте заботу о следующем разработчике.
Отделение поведения от разметки
Традиционно вызовы функций 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, основанными на современных стандартах.
Примечания
- ↑ Лэнгридж, Стюарт Ненавязчивый DHTML и мощь маркированных списков (ноябрь 2002). Дата обращения: 4 июня 2009. Архивировано 1 апреля 2012 года. (англ.)
- ↑ Кейт, Джереми Отделение поведения (20 июня 2006). Дата обращения: 4 июня 2009. Архивировано 1 апреля 2012 года. (англ.)
- ↑ Олсон, Томми Вежливая деградация и постепенное улучшение (6 февраля 2007). Дата обращения: 4 июня 2009. Архивировано 1 апреля 2012 года. (англ.)
- ↑ 4,0 4,1 4,2 Johansen, 2010, Chapter 9. Unobtrusive JavaScript.
Литература
- Johansen, C. Test-Driven JavaScript Development. — Pearson Education, 2010. — 480 p. — ISBN 9780321684059.
Ссылки
- The Web Standards Project. The JavaScript Manifesto . Дата обращения: 5 апреля 2015. Архивировано 4 апреля 2015 года.