Ненав'язливий JavaScriptНенав'язливий JavaScript (англ. unobtrusive JavaScript) — загальний підхід до web-програмування мовою JavaScript. Термін було запроваджено 2002-го року Стюартом Ленгріджем[1]. Принципами ненав'язливого Javascript зазвичай вважаються такі:
Причини появиЧерез несумісність реалізацій мови і Document Object Model у різних браузерах JavaScript мав репутацію мови, що не підходила до серйозного використання і розвитку. Поява браузерів, що притримувались стандартів, поява інтерфейсів AJAX та веб 2.0 змінило ситуацію, зробивши JavaScript необхідним інструментом. Якщо раніше JavaScript використовували для порівняно простих і несуттєвих завдань, таких як перевірка форм на стороні браузера або декоративні елементи оформлення сторінок, то згодом він став використовуватись для створення основної функціональності сайтів. МетаПрацездатність вебсайту для найбільш широкої аудиторії користувачів, включно із доступністю для користувачів із обмеженими можливостями, є головною метою ненав'язливого підходу. Досягнення цієї мети і базується на розділенні представлення і поведінки, за якого поведінка програмується з допомогою зовнішніх скриптів мовою JavaScript і прив'язується до семантичної розмітки[4]. Завдяки використанню ненав'язливого підходу легше досягти таких результатів[4]:
РекомендаціїКріс Хейлман (Cris Heilmann), один із прихильників використання ненав'язливого підходу, склав для нього у 2007 році сім простих правил[4]:
Відділення поведінки від розміткиТрадиційно виклик функцій JavaScript розміщувався безпосередньо у розмітці документу. Наступний приклад ілюструє типічну реалізацію валідації полів форми: <input type="text" name="date" onchange="validateDate(this);" />
За добре структурованого підходу до розробки розмітка використовується для опису структури документу, а не його поведінки. Змішування структури і поведінки веде, поміж іншим, до погіршення можливості підтримувати сайт. Це відбувається з тієї ж причини, що й у випадку змішування структури і представлення: якщо сайт має сотні полів з даними, то додавання відповідного атрибуту <input type="text" class="validatedDate" />
Скрипт може переглядати всі елементи input, що стосуються класу 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(){
// логіка обробника
}
Оскільки атрибут Примітки
Література
Посилання
|