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

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

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

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

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

• The Web Standards Project. The JavaScript Manifesto. Процитовано 5 квітня 2015.