- Ненавязчивый JavaScript
-
Ненавязчивый JavaScript (англ. Unobtrusive JavaScript) является относительно новой техникой в программировании на языке JavaScript, используемой в Вебе. Этот термин был изобретен в 2002 году Стюартом Лэнгриджем.[1] Хотя он официально не определён, под его принципами обычно понимаются следующие:
- отделение функциональности веб-страницы («уровень поведения») от структуры, содержания и представления Web-страницы;[2]
- лучшие практики по избежанию проблем традиционного программирования на JavaScript (таких как зависимость от браузера и недостаток маcштабируемости);
- техники «постепенного улучшения» (англ. Progressive enhancement) для поддержки пользовательских агентов, которые могут не в полной мере поддерживать функциональность JavaScript.[3]
Предпосылки появления парадигмы
JavaScript давно имел репутацию языка, непригодного для серьёзного применения и развития. Такая ситуация складывалась в основном из-за несовместимых реализаций языка и Document Object Model в различных браузерах. Недавнее появление стандартизированных браузеров возвело JavaScript в рамки высококачественного средства отладки, в результате стало возможным организовать масштабируемость JavaScript кода, а появление интерфейсов AJAX и Веб 2.0 сделали это необходимым.
Если раньше JavaScript был зарезервирован для относительно простых и некритичных задач, таких, как валидация форм и декоративные новинки, то в настоящее время язык используется для создания основной функциональности сайта. Ненавязчивый JavaScript можно рассматривать как часть более широкого продвижения веб-стандартов; в основном, поскольку спрос на кросс-совместимость браузера привел к усилению акцента на стандартизированные разметки и стиль, увеличился спрос на Rich Internet Applications, это вызывало движение в направлении более надежных методик в ненавязчивом JavaScript.
Отделение поведения от разметки
Традиционно вызовы функций 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). Архивировано из первоисточника 1 апреля 2012. Проверено 4 июня 2009. (англ.)
- ↑ Кейт, Джереми Отделение поведения (20 июня 2006). Архивировано из первоисточника 1 апреля 2012. Проверено 4 июня 2009. (англ.)
- ↑ Олсон, Томми Вежливая деградация и постепенное улучшение (6 февраля 2007). Архивировано из первоисточника 1 апреля 2012. Проверено 4 июня 2009. (англ.)
Категория:- JavaScript
Wikimedia Foundation. 2010.