Ненавязчивый JavaScript () — подход к web-программированию на языке JavaScript. Термин введён в 2002 году Стюартом Лэнгриджем. Под принципами ненавязчивого JavaScript обычно понимают следующее: отделение функциональности веб-страницы («уровень поведения») от структуры, содержания и представления её же; наработанные методы по избежанию проблем традиционного программирования на JavaScript (таких, как зависимость от браузера и недостаток масштабируемости); техники «постепенного улучшения» () для поддержки пользовательских агентов, которые могут не в полной мере поддерживать функциональность JavaScript.
Предпосылки появления
Из-за несовершенной реализации объектной модели документа (DOM) и непоследовательной поддержки языка в ранних браузерах, JavaScript долгое время имел репутацию языка, непригодного для серьезной разработки, что изменило появление основанных на стандартах веб-браузеров, AJAX и интерфейсов Web 2.0, сделав JavaScript важный инструмент, хотя этот язык программирования когда-то использовался для относительно простых и тривиальных задач, таких как проверка ввода на стороне браузера и декоративные элементы, с тех пор он используется для создания ядра функциональность сайта.
Цели Работоспособность веб-сайта для наиболее широкой аудитории пользователей, включая доступность для пользователей с ограниченными возможностями, является главной целью ненавязчивого подхода. Достижение цели основывается на разделении представления и поведения, при котором поведение программируется с помощью внешних скриптов JavaScript и привязывается к семантической разметке.
За счёт применения ненавязчивого подхода легче достичь следующих результатов: Доступность веб-сайта для большего числа пользователей; Гибкость при внесении изменений в документ, стили или скрипты; Эксплуатационная надёжность (robustness) и расширяемость, в том числе возможность постепенного улучшения; Повышение производительности, например, за счёт кэширования внешних скриптов.
Рекомендации Крис Хейлман (), один из сторонников применения ненавязчивого подхода, в 2007 году составил для него семь правил: Не делайте никаких предположений. Ищите зацепки () и отношения. Оставьте обход () экспертам. Понимайте браузеры и пользователей. Имейте представление о событиях. Играйте хорошо с другими. Проявляйте заботу о следующем разработчике.
Отделение поведения от разметки Традиционно вызовы функций 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, основанными на современных стандартах.
Примечания
Литература
Ссылки
Категория:JavaScript Категория:Веб-программирование