Мы используем файлы cookie.
Продолжая использовать сайт, вы даете свое согласие на работу с этими файлами.
Ненавязчивый JavaScript

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

Подписчиков: 0, рейтинг: 0

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

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

Предпосылки появления

Из-за несовместимых реализаций языка и Document Object Model в различных браузерах JavaScript имел репутацию языка, непригодного для серьёзного применения и развития. Появление веб-браузеров, придерживающихся стандартов, появление интерфейсов AJAX и Веб 2.0 изменило ситуацию, сделав JavaScript необходимым инструментом. Если раньше JavaScript использовался для относительно простых и несущественных задач, таких, как проверка ввода на стороне браузера и декоративные элементы, то в дальнейшем он стал применяться для создания основной функциональности сайта.

Цели

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

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

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

Рекомендации

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

  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.

Ссылки


Новое сообщение