Ненав'язливий JavaScript: відмінності між версіями
[перевірена версія] | [перевірена версія] |
Goo3 (обговорення | внесок) шаблон |
Ерідан (обговорення | внесок) м оформлення, правопис |
||
(Не показані 14 проміжних версій 10 користувачів) | |||
Рядок 1: | Рядок 1: | ||
'''Ненав'язливий JavaScript''' ({{Lang-en|unobtrusive JavaScript}}) |
'''Ненав'язливий JavaScript''' ({{Lang-en|unobtrusive JavaScript}}) — загальний підхід до [[Вебпрограмування|web-програмування]] мовою [[JavaScript]]. Термін було запроваджено [[2002]]-го року Стюартом Ленгріджем<ref> |
||
{{cite web |
|||
⚫ | * відділення функціональності |
||
|url = http://www.kryogenix.org/code/browser/aqlists/ |
|||
⚫ | |||
|title = Ненавязчивый DHTML и мощь маркированных списков |
|||
* техніки «поступового покращення» ({{Lang-en|Progressive enhancement}}) для підтримки [[User agent|користувацьких агентів]], що можуть не повністю підтримувати функції JavaScript.<ref><span class="citation">''Олсон, Томми'' [http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ Вежливая деградация и постепенное улучшение] (6 февраля 2007). <small>Проверено 4 июня 2009.</small> <small>[http://www.webcitation.org/66b4bE2mb Архивировано из первоисточника 1 апреля 2012].</small></span> </ref> |
|||
|last = Лэнгридж |
|||
|first = Стюарт |
|||
|date = 2002-11 |
|||
|accessdate = 2009-06-04 |
|||
|archiveurl = https://www.webcitation.org/66b4ZwWdJ?url=http://www.kryogenix.org/code/browser/aqlists/ |
|||
|archivedate = 2012-04-01 |
|||
|deadurl = no |
|||
}}{{ref-en}} |
|||
</ref>. Принципами ненав'язливого Javascript зазвичай вважаються такі: |
|||
⚫ | * відділення функціональності вебсторінки («рівень поведінки») від структури, змісту і [[CSS|представлення]] вебсторінки;<ref>{{Cite web|url=http://www.alistapart.com/articles/behavioralseparation|title=Отделение поведения|last=Кейт|first=Джереми|date=2006-06-20|archiveurl=https://www.webcitation.org/66b4aWkPK?url=http://www.alistapart.com/articles/behavioralseparation|archivedate=2012-04-01|accessdate=2009-06-04|deadurl=no}}{{Ref-en}}</ref> |
||
⚫ | |||
* техніки «поступового покращення» ({{Lang-en|Progressive enhancement}}) для підтримки [[User agent|користувацьких агентів]], що можуть не повністю підтримувати функції JavaScript.<ref> |
|||
{{cite web |
|||
|last = Олсон |
|||
|first = Томми |
|||
|title = Вежливая деградация и постепенное улучшение |
|||
|date = 2007-02-06 |
|||
|url = http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ |
|||
|accessdate = 2009-06-04 |
|||
|archiveurl = https://www.webcitation.org/66b4bE2mb?url=http://accessites.org/site/2007/02/graceful-degradation-progressive-enhancement/ |
|||
|archivedate = 2012-04-01 |
|||
|deadurl = no |
|||
}}{{ref-en}} |
|||
</ref> |
|||
== Причини появи == |
== Причини появи == |
||
Через несумісність реалізацій мови і |
Через несумісність реалізацій мови і [[Об'єктна модель документа|Document Object Model]] у різних браузерах JavaScript мав репутацію мови, що не підходила до серйозного використання і розвитку. Поява [[браузер]]ів, що притримувались стандартів, поява інтерфейсів [[AJAX]] та [[веб 2.0]] змінило ситуацію, зробивши JavaScript необхідним інструментом. Якщо раніше JavaScript використовували для порівняно простих і несуттєвих завдань, таких як перевірка форм на стороні браузера або декоративні елементи оформлення сторінок, то згодом він став використовуватись для створення основної функціональності сайтів. |
||
== Мета == |
== Мета == |
||
Працездатність вебсайту для найбільш широкої аудиторії користувачів, включно із [[Доступність (проєктування)|доступністю]] для користувачів із [[Інвалідність|обмеженими можливостями]], є головною метою ненав'язливого підходу. Досягнення цієї мети і базується на розділенні представлення і поведінки, за якого поведінка програмується з допомогою зовнішніх скриптів мовою JavaScript і прив'язується до семантичної розмітки{{Sfn|Johansen|2010|loc=Chapter 9. Unobtrusive JavaScript}}. |
|||
Завдяки використанню ненав'язливого підходу легше досягти таких результатів{{sfn|Johansen|2010|loc=Chapter 9. Unobtrusive JavaScript}} |
Завдяки використанню ненав'язливого підходу легше досягти таких результатів{{sfn|Johansen|2010|loc=Chapter 9. Unobtrusive JavaScript}}: |
||
* Доступність сайту для більшої кількості користувачів; |
* Доступність сайту для більшої кількості користувачів; |
||
* Гнучкість при внесенні змін у документ, стилі чи скрипти; |
* Гнучкість при внесенні змін у документ, стилі чи скрипти; |
||
* Експлуатаційна надійність (robustness) і можливість розширення, в тому числі можливість поступового покращення; |
* Експлуатаційна надійність (robustness) і можливість розширення, в тому числі можливість поступового покращення; |
||
* Підвищення продуктивності, наприклад, за рахунок |
* Підвищення продуктивності, наприклад, за рахунок [[кеш]]ування зовнішніх скриптів. |
||
== Рекомендації == |
== Рекомендації == |
||
Кріс Хейлман (Cris Heilmann), один із прихильників використання ненав'язливого підходу, склав для нього у [[2007]] році сім простих правил{{sfn|Johansen|2010|loc=Chapter 9. Unobtrusive JavaScript}} |
Кріс Хейлман (Cris Heilmann), один із прихильників використання ненав'язливого підходу, склав для нього у [[2007]] році сім простих правил{{sfn|Johansen|2010|loc=Chapter 9. Unobtrusive JavaScript}}: |
||
# Не робіть припущень; |
# Не робіть припущень; |
||
# Шукайте зачіпки (hooks) і зв'язки; |
# Шукайте зачіпки (hooks) і зв'язки; |
||
Рядок 27: | Рядок 51: | ||
== Відділення поведінки від розмітки == |
== Відділення поведінки від розмітки == |
||
Традиційно виклик функцій JavaScript |
Традиційно виклик функцій JavaScript розміщувався безпосередньо у [[Мова розмітки даних|розмітці]] документу. Наступний приклад ілюструє типічну реалізацію валідації полів форми:<syntaxhighlight lang="xml"> |
||
<input type="text" name="date" /> |
<input type="text" name="date" /> |
||
</ |
</syntaxhighlight>За добре структурованого підходу до розробки розмітка використовується для опису структури документу, а не його поведінки. Змішування структури і поведінки веде, поміж іншим, до погіршення можливості підтримувати сайт. Це відбувається з тієї ж причини, що й у випадку змішування структури і представлення: якщо сайт має сотні полів з даними, то додавання відповідного атрибуту <code>onchange</code> до кожного і майбутня модифікація їх у майбутньому може виявитись досить складною процедурою. |
||
Ненав'язливе рішення |
Ненав'язливе рішення полягає в програмній установці обробника подій. Зазвичай це досягається логічним виділенням елементів, для яких є необхідним той чи інший обробник у клас із наступною обробкою:<syntaxhighlight lang="xml"> |
||
<input type="text" class="validatedDate" /> |
<input type="text" class="validatedDate" /> |
||
</ |
</syntaxhighlight>Скрипт може переглядати всі елементи input, що стосуються класу <code>validatedDate</code> і встановлювати для них потрібний обробник:<syntaxhighlight lang="javascript"> |
||
window. { |
window. { |
||
var inputs, i; |
var inputs, i; |
||
Рядок 47: | Рядок 71: | ||
function validateDate(){ |
function validateDate(){ |
||
// логіка обробника |
|||
// логика обработчика |
|||
} |
} |
||
</ |
</syntaxhighlight>Наступний скрипт є специфічним для бібліотеки JavaScript [[jQuery]]:<syntaxhighlight lang="javascript"> |
||
$(document).ready(function(){ |
$(document).ready(function(){ |
||
$('input.validatedDate').bind('change', validateDate); |
$('input.validatedDate').bind('change', validateDate); |
||
Рядок 57: | Рядок 81: | ||
// логіка обробника |
// логіка обробника |
||
} |
} |
||
</ |
</syntaxhighlight>Оскільки атрибут <code>class</code> відображає семантичну роль елементу, такий підхід добре узгоджується з рекомендаціями [[W3C]], що засновані на сучасних стандартах. |
||
== Примітки == |
== Примітки == |
||
Рядок 67: | Рядок 91: | ||
== Посилання == |
== Посилання == |
||
* {{Cite web|url=http://webstandards.org/action/dstf/manifesto/|title=The JavaScript Manifesto|accessdate=2015-04-05|author=The Web Standards Project}} |
* {{Cite web|url=http://webstandards.org/action/dstf/manifesto/|title=The JavaScript Manifesto|accessdate=2015-04-05|author=The Web Standards Project}} |
||
⚫ | |||
⚫ | |||
{{JavaScript}} |
{{JavaScript}} |
||
⚫ | |||
⚫ | |||
[[Категорія:Статті з прикладами коду мовою JavaScript]] |
|||
[[Категорія:Статті з прикладами коду мовою XML]] |
Поточна версія на 17:58, 4 вересня 2022
Ненав'язливий 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]:
- Не робіть припущень;
- Шукайте зачіпки (hooks) і зв'язки;
- Залиште обхід (traversing) експертам;
- Розумійте роботу браузерів і користувачів;
- Зрозумійте, як працюють події;
- Грайте з іншими розробниками;
- Турбуйтесь про наступного розробника.
Традиційно виклик функцій JavaScript розміщувався безпосередньо у розмітці документу. Наступний приклад ілюструє типічну реалізацію валідації полів форми:
<input type="text" name="date" >"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, що засновані на сучасних стандартах.
- ↑ Лэнгридж, Стюарт (2002-11). Ненавязчивый DHTML и мощь маркированных списков. Архів оригіналу за 1 квітня 2012. Процитовано 4 червня 2009.(англ.)
- ↑ Кейт, Джереми (20 червня 2006). Отделение поведения. Архів оригіналу за 1 квітня 2012. Процитовано 4 червня 2009.(англ.)
- ↑ Олсон, Томми (6 лютого 2007). Вежливая деградация и постепенное улучшение. Архів оригіналу за 1 квітня 2012. Процитовано 4 червня 2009.(англ.)
- ↑ а б в Johansen, 2010, Chapter 9. Unobtrusive JavaScript.
- Johansen, C. Test-Driven JavaScript Development. — Pearson Education, 2010. — 480 p. — ISBN 9780321684059.
- The Web Standards Project. The JavaScript Manifesto. Процитовано 5 квітня 2015.