Разделяй и властвуй

Джереми Кит

Перевод оригинальной статьи Джереми Кита Behavioral Separation

Translated with the permission of A List Apart Magazine

Перевод Кирилла Грушко

Вековая практика размежевания вызывает немало нареканий, но по-прежнему остается непревзойденным способом предотвращения общественных конфликтов. Отдадим должное дизайнерам – в своей профессиональной сфере они никогда не подвергали сомнению принцип размежевания элементов – залог успеха любого дизайнерского решения. Этот принцип сохраняет значение и в области сайтостроительства, причем не только по отношению к внешнему виду и содержимому сайта, но и применительно к механизму его функционирования, программному коду.

Стиль разметке рознь.

Одно из величайших преимуществ таблиц CSS – их способность отделять стили от содержимого сайта. Нет ничего зазорного в том, чтобы создать страницу при помощи одних лишь строчных стилевых деклараций, наподобие следующей:

<p style="font-weight: bold; color: red;">This text is important</p>

Ничто не мешало бы воспользоваться здесь и тэгом <font>. Нельзя не признать, однако, что данный метод не отличается конструктивностью. Информацию о стилях рациональнее поместить в отдельный файл, добавив в разметку отсылку к этому файлу:

<p class="important">This text is important </p>

Вот как это выглядит в CSS:

p.important { font-weight: bold; color: red; }

Поступив таким образом, дизайнер обеспечивает себе легкость в управлении стилями; в случае необходимости он сможет без труда изменить их характеристики. Более существенно, что жизнь облегчается не только дизайнеру, но и окружающим: автору текстов не придется продираться сквозь чащу строчных деклараций при редактировании, а посетитель сайта останется доволен ускоренной загрузкой более «легких» страниц.

Сказанное относится не только к CSS, но и к JavaScript. К сожалению, большинство создателей веб-страниц не гнушаются встраиванием функционального кода JavaScript непосредственно в разметку, чего следовало бы по возможности избегать.

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

Предположим, требуется добавить функциональность к определенной ссылке. Возможный вариант – воспользоваться так называемым псевдопротоколом JavaScript:

<a href=”javascript: doSomething();”>click for fun</a>

Такой подход недальновиден. Программы-агенты, находящиеся на компьютере пользователя и не подозревающие о наличии на сайте JavaScript, непременно «споткнутся» о переменную href. Более правильным было бы использовать, наряду с переменной href, обработчик события:

<a href="#" onclick="doSomething();">click for fun</a>

Теперь следует указать, куда попадет пользователь при нажатии на ссылку:

<a href="arealpage.html" onclick="doSomething(); return false;">click for fun </a>

Обратите внимание, что ссылка не только выполняет свое предназначение (даже при отключенном JavaScript), но и прочитывается роботом-поисковиком. Вместе с тем, обработчик события помещен непосредственно в разметку, что, как упоминалось, является существенным недостатком. К счастью, ситуация исправима: строчные обработчики событий JavaScript являются, по сути, эквивалентами строчных деклараций стилей CSS; их можно с легкостью удалять из разметки и помещать во внешний файл, добавляя в разметку соответствующие ссылки:

<a href="arealpage.html" class="fun">click for fun</a>

Во внешнем файле можно разместить скрипт обнаружения всех ссылок, у которых под className значится “fun”, и позволить им запускать функцию doSomething()при нажатии кнопки мышки.

Подобное размежевание функциональности и разметки можно охарактеризовать как ненавязчивый JavaScript. Попробуем применить этот метод на практике.

Картинная галерея.

Два года назад я поместил на сайте A List Apart статью о создании галереи изображений при помощи JavaScript. Если вы знакомы со статьей, то должны помнить, что предложенный мной скрипт отлично справился с поставленной задачей. Вместе с тем, предлагаю вам ещё раз взглянуть на разметку:

<ul>

<li><a onclick="return showPic(this)" »

href="images/bananas.jpg" title="A bunch of bananas »

on a table">some bananas</a></li>

<li><a onclick="return showPic(this)" »

href="images/condiments.jpg" title="Condiments in a »

Chinese restaurant">two bottles</a></li>

<li><a onclick="return showPic(this)" »

href="images/shells.jpg" title="Seashells on a table"> »

some shells</a></li>

</ul>

Как мы теперь знаем, гораздо лучше было бы заменить вездесущие обработчики событий их классовыми атрибутами:

<ul>

<li><a class="gallerypic" href="images/bananas.jpg" »

title="A bunch of bananas on a table">some bananas</a></li>

<li><a class="gallerypic" href="images/condiments.jpg" »

title="Condiments in a Chinese restaurant">two bottles</a></li>

<li><a class="gallerypic" href="images/shells.jpg" »

title="Seashells on a table">some shells</a></li>

</ul>

Однако, этого недостаточно. Вместо того, чтобы присваивать стиль каждому элементу в списке, я поступлю гораздо эффективнее: присвою списку уникальный id.

<ul id="imagegallery">

<li><a href="images/bananas.jpg" title="A bunch of »

bananas on a table">some bananas</a></li>

<li><a href="images/condiments.jpg" title="Condiments »

in a Chinese restaurant">two bottles</a></li>

<li><a href="images/shells.jpg" title="Seashells on a »

table">some shells</a></li>

</ul>

Остается лишь написать функцию для добавления внешних обработчиков событий в разметку.

Размежевание на практике.

Назовем эту функцию prepareGallery, а для обнаружения в разметке ссылок используем объектную модель документа (DOM). Этого нетрудно добиться посредством методов getElementById и getElementsByTagName:

document.getElementById("imagegallery").getElementsByTagName("a");

Указанные методы эквивалентны селекторам CSS и равнозначны совмещению id с селекторами элементов.

#imagegallery

Следует также удостовериться, что все браузеры понимают использованные методы DOM. Для этого надо:

1. Убедиться в наличии элемента с id “imagegallery.”
2. Сформировать список с id “imagegallery”.
3. Распознать в списке все ссылки и запустить по ним цикл.
4. Добавить к каждой ссылке обработчик события onclick и привязать его к функции showPic.

Вот как это выглядит в JavaScript:

function prepareGallery(){

if( document.getElementById &&

document.getElementsByTagName ){

if( document.getElementById( 'imagegallery' ) ){

var gallery = document.getElementById( 'imagegallery' );

var links = gallery.getElementsByTagName( 'a' );

for( var i=0; i < links.length; i++ ){

links[i].onclick = function(){

return showPic(this);

};

}

}

}

}

Остается запустить функцию. Здесь нас подстерегает проблема: запуск нельзя осуществить обычным способом prepareGallery(), ибо функция, находящаяся во внешнем файле или в разделе head документа, запустится до полной загрузки веб-страницы. Это помешает запуску методов DOM, поскольку на тот момент ни одной объектной модели документа загружено не будет. Необходимо, стало быть, дождаться окончательной загрузки страницы. Как известно, загрузка документа предполагает запуск события load event для объекта window. Для присвоения функции prepareGallery этому событию можно использовать соответствующий обработчик события:

window.onload = prepareGallery;

В то же время, лучше не нарушать порядок запуска события onload ради одной-единственной функции и воспользоваться прекрасной функцией Саймона Виллисона – addLoadEvent, позволяющей выстраивать функции в очередь, которая запускается после окончательной загрузки документа:

addLoadEvent( prepareGallery );

Выводы.

Ненавязчивый JavaScript – идея довольно новая, но весьма нетрудная в применении. Для начала, организуйте содержимое сайта посредством внятной семантической разметки. Затем придайте страницам соответствующий вид при помощи CSS. Наконец, добавьте функциональность при помощи скриптов DOM. Все очень просто – главное удостовериться, что все части кода держатся на почтительном расстоянии друг от друга.

Об авторе: