Ненав'язливий JavaScript

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

• відділення функціональності вебсторінки («рівень поведінки») від структури, змісту і представлення вебсторінки;
• відпрацьовані методи із уникнення проблем традиційного програмування мовою 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. The JavaScript Manifesto. Процитовано 5 квітня 2015.