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

Ненавязчивый 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.

Ссылки

• The Web Standards Project. [www.webstandards.org/action/dstf/manifesto/ The JavaScript Manifesto]. Проверено 5 апреля 2015.

Отрывок, характеризующий Ненавязчивый JavaScript

Рассматривая дела и бумаги своей покойной жены, он к ее памяти не испытывал никакого чувства, кроме жалости в том, что она не знала того счастья, которое он знал теперь. Князь Василий, особенно гордый теперь получением нового места и звезды, представлялся ему трогательным, добрым и жалким стариком.
Пьер часто потом вспоминал это время счастливого безумия. Все суждения, которые он составил себе о людях и обстоятельствах за этот период времени, остались для него навсегда верными. Он не только не отрекался впоследствии от этих взглядов на людей и вещи, но, напротив, в внутренних сомнениях и противуречиях прибегал к тому взгляду, который он имел в это время безумия, и взгляд этот всегда оказывался верен.
«Может быть, – думал он, – я и казался тогда странен и смешон; но я тогда не был так безумен, как казалось. Напротив, я был тогда умнее и проницательнее, чем когда либо, и понимал все, что стоит понимать в жизни, потому что… я был счастлив».
Безумие Пьера состояло в том, что он не дожидался, как прежде, личных причин, которые он называл достоинствами людей, для того чтобы любить их, а любовь переполняла его сердце, и он, беспричинно любя людей, находил несомненные причины, за которые стоило любить их.


С первого того вечера, когда Наташа, после отъезда Пьера, с радостно насмешливой улыбкой сказала княжне Марье, что он точно, ну точно из бани, и сюртучок, и стриженый, с этой минуты что то скрытое и самой ей неизвестное, но непреодолимое проснулось в душе Наташи.
Все: лицо, походка, взгляд, голос – все вдруг изменилось в ней. Неожиданные для нее самой – сила жизни, надежды на счастье всплыли наружу и требовали удовлетворения. С первого вечера Наташа как будто забыла все то, что с ней было. Она с тех пор ни разу не пожаловалась на свое положение, ни одного слова не сказала о прошедшем и не боялась уже делать веселые планы на будущее. Она мало говорила о Пьере, но когда княжна Марья упоминала о нем, давно потухший блеск зажигался в ее глазах и губы морщились странной улыбкой.
Перемена, происшедшая в Наташе, сначала удивила княжну Марью; но когда она поняла ее значение, то перемена эта огорчила ее. «Неужели она так мало любила брата, что так скоро могла забыть его», – думала княжна Марья, когда она одна обдумывала происшедшую перемену. Но когда она была с Наташей, то не сердилась на нее и не упрекала ее. Проснувшаяся сила жизни, охватившая Наташу, была, очевидно, так неудержима, так неожиданна для нее самой, что княжна Марья в присутствии Наташи чувствовала, что она не имела права упрекать ее даже в душе своей.
Наташа с такой полнотой и искренностью вся отдалась новому чувству, что и не пыталась скрывать, что ей было теперь не горестно, а радостно и весело.
Когда, после ночного объяснения с Пьером, княжна Марья вернулась в свою комнату, Наташа встретила ее на пороге.
– Он сказал? Да? Он сказал? – повторила она. И радостное и вместе жалкое, просящее прощения за свою радость, выражение остановилось на лице Наташи.
– Я хотела слушать у двери; но я знала, что ты скажешь мне.
Как ни понятен, как ни трогателен был для княжны Марьи тот взгляд, которым смотрела на нее Наташа; как ни жалко ей было видеть ее волнение; но слова Наташи в первую минуту оскорбили княжну Марью. Она вспомнила о брате, о его любви.
«Но что же делать! она не может иначе», – подумала княжна Марья; и с грустным и несколько строгим лицом передала она Наташе все, что сказал ей Пьер. Услыхав, что он собирается в Петербург, Наташа изумилась.
– В Петербург? – повторила она, как бы не понимая. Но, вглядевшись в грустное выражение лица княжны Марьи, она догадалась о причине ее грусти и вдруг заплакала. – Мари, – сказала она, – научи, что мне делать. Я боюсь быть дурной. Что ты скажешь, то я буду делать; научи меня…
– Ты любишь его?
– Да, – прошептала Наташа.
– О чем же ты плачешь? Я счастлива за тебя, – сказала княжна Марья, за эти слезы простив уже совершенно радость Наташи.
– Это будет не скоро, когда нибудь. Ты подумай, какое счастие, когда я буду его женой, а ты выйдешь за Nicolas.
– Наташа, я тебя просила не говорить об этом. Будем говорить о тебе.
Они помолчали.
– Только для чего же в Петербург! – вдруг сказала Наташа, и сама же поспешно ответила себе: – Нет, нет, это так надо… Да, Мари? Так надо…


Прошло семь лет после 12 го года. Взволнованное историческое море Европы улеглось в свои берега. Оно казалось затихшим; но таинственные силы, двигающие человечество (таинственные потому, что законы, определяющие их движение, неизвестны нам), продолжали свое действие.
Несмотря на то, что поверхность исторического моря казалась неподвижною, так же непрерывно, как движение времени, двигалось человечество. Слагались, разлагались различные группы людских сцеплений; подготовлялись причины образования и разложения государств, перемещений народов.
Историческое море, не как прежде, направлялось порывами от одного берега к другому: оно бурлило в глубине. Исторические лица, не как прежде, носились волнами от одного берега к другому; теперь они, казалось, кружились на одном месте. Исторические лица, прежде во главе войск отражавшие приказаниями войн, походов, сражений движение масс, теперь отражали бурлившее движение политическими и дипломатическими соображениями, законами, трактатами…