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

Матеріал з Вікіпедії — вільної енциклопедії.
Перейти до: навігація, пошук

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

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

Причини появи[ред.ред. код]

Через несумісність реалізацій мови і Document Object Model у різних браузерах JavaScript мав репутацію мови, що не підходила до серйозного використання і розвитку. Поява браузерів, що притримувались стандартів, поява інтерфейсів AJAX та веб 2.0 змінило ситуацію, зробивши JavaScript необхідним інструментом. Якщо раніше JavaScript використовували для порівняно простих і несуттєвих завдань, таких як перевірка форм на стороні браузера або декоративні елементи оформлення сторінок, то згодом він став використовуватись для створення основної функціональності сайтів.

Мета[ред.ред. код]

Працездатність веб-сайту для найбільш широкої аудиторії користувачів, включно із доступністю для користувачів із обмеженими можливостями, є головною метою ненав'язливого підходу. Досягнення цієї мети і базується на розділенні представлення і поведінки, за якого поведінка програмується з допомогою зовнішніх скриптів мовою JavaScript і прив'язується до семантичної розмітки[4].

Завдяки використанню ненав'язливого підходу легше досягти таких результатів[4]:

  • Доступність сайту для більшої кількості користувачів;
  • Гнучкість при внесенні змін у документ, стилі чи скрипти;
  • Експлуатаційна надійність (robustness) і можливість розширення, в тому числі можливість поступового покращення;
  • Підвищення продуктивності, наприклад, за рахунок кешування зовнішніх скриптів.

Рекомендації[ред.ред. код]

Кріс Хейлман (Cris Heilmann), один із прихильників використання ненав'язливого підходу, склав для нього у 2007 році сім простих правил[4]:

  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, що засновані на сучасних стандартах.

Примітки[ред.ред. код]

  1. Лэнгридж, Стюарт (2002-11). Ненавязчивый DHTML и мощь маркированных списков. Архів оригіналу за 2012-04-01. Процитовано 2009-06-04. (англ.)
  2. Кейт, Джереми (2006-06-20). Отделение поведения. Архів оригіналу за 2012-04-01. Процитовано 2009-06-04. (англ.)
  3. Олсон, Томми (2007-02-06). Вежливая деградация и постепенное улучшение. Архів оригіналу за 2012-04-01. Процитовано 2009-06-04. (англ.)
  4. а б в Johansen, 2010, Chapter 9. Unobtrusive JavaScript

Література[ред.ред. код]

  • Johansen, C. Test-Driven JavaScript Development. — Pearson Education, 2010. — 480 p. — ISBN 9780321684059.

Посилання[ред.ред. код]