Поєдинокбібліотек Ajax Dojo проти YUI

Застосування бібліотек для створення додаткових зручностей для користувача

Чому потрібно використати бібліотеку?

Тепер все набагато краще. Хоча проблеми браузерів все ще існують (це камінь на городі Windows® Internet Explorer® 6). Крім значно покращеного інструментарію тягар розробки крос-браузерного інтерфейсу тепер полегшує безліч різноманітних бібліотек. У спробах вибрати відповідне середовище розробки, щоб спростити собі життя, ви стикаєтеся з парадоксом вибору ― але це, звичайно, краще за довгі ночі налагодження у спробах подолати проблеми браузера X на операційній системі Y! Сьогодні потрібно шукати бібліотеку, яка ляже в основу ваших зусиль із програмування – типу віртуальної машини, яка не залежить від різних реалізацій браузера та від коду, який ви намагаєтесь написати.

Окрім згладжування різниці між браузерами, такий інструментарій дає вам додаткові важелі у повсякденній роботі з програмування. Деякі бібліотеки-мінімалісти вирішують одне і тільки одне завдання, інші є універсальним інструментарієм, який прагне виправити всі недоліки Web. Але незважаючи на відмінності бібліотек, у них багато спільного. Більшість із них забезпечує:

оболонку об'єкта XMLHttpRequest (XHR);
селектори CSS, що не залежать від браузера;
спрощену обробку подій;
різноманітні анімації, ефекти та віджети;
інші корисні функції.

Як же вибирати лише одну бібліотеку? Єдина неправильна відповідь – кодування вручну, не користуючись бібліотеками. Вибір бібліотеки може бути важким, але це ніщо в порівнянні зі спробами зробити все самому. Перш ніж панікувати та розмірковувати проЯк вибрати єдину бібліотеку, знайте, що більшість їх чудово працює разом (в розумних межах), а іноді їх поєднання є найкращим варіантом. Тим не менш, ось деякі питання, на які необхідно відповісти під час вибору бібліотеки.

Чому YUI та Dojo?

Версія YUI 3 - це відносно нова, повністю переписана бібліотека Yahoo! Розроблене з метою підвищення продуктивності, це оновлення виглядає дуже перспективним. Однак на момент написання статті бібліотека віджетів замала, хоча найближчими місяцями положення має змінитися. Якщо ви починаєте сьогодні, можете зупинитися на YUI версії 2, але на майбутнє тримати в полі зору YUI 3.

Dojo дотримується аналогічного підходу, хоча його реалізація простіша. Ви отримуєте доступ до ядра з використанням dojo як оболонка верхнього рівня, тоді як віджети знаходяться на рівні dijit.

Простий спосіб Ajax-програмування

Хоча сам об'єкт XHR не дуже складний, щоб зробити все правильно, потрібно врахувати досить багато нюансів, тому незабаром ви прийдете до рівня абстракції, характерного практично для всіх сьогоднішньої бібліотеки Ajax. Dojo та YUI – не виняток, і кожна представляє просту у застосуванні оболонку. Працюючи з XHR за допомогою бібліотеки, ви знайдете спільні теми. Як мінімум, ці оболонки:

нададуть URL ресурсу, що викликається;
забезпечать спосіб передачі параметрів;
запропонують спосіб вказівки методу HTTP-виклику (GET, POST);
включають механізм зворотного дзвінка для обробки результату.

YUI та Ajax

YUI зберігає свою XHR-оболонку в Connection Manager. API дуже простий: ви називаєте єдиний метод та отримуєте об'єкт з'єднання. Типовий виклик може виглядати приблизно як улістингу 1.

Лістинг 1. Приклад Ajax-дзвінка YUI

Він може здатися дещо багатослівним у порівнянні з іншими бібліотеками, але я трохи розширив код задля його читабельності. Функції зворотного дзвінка та URL можна було вставити прямо у дзвінок Connect.asyncRequest . Як бачите, витягуються певні елементи – у разі

Dojo та Ajax

Підхід Dojo аналогічний підходу YUI, хоча і трохи компактніший за нього. Оболонка XHR Dojo розміщується в Dojo Base і надає методи для основних дій HTTP (post, get, put, delete). Один із способів його виклику наведено у лістингу 2.

Лістинг 2. Приклад Ajax-дзвінка Dojo

Знову ж таки, я вирішив трохи покращити читабельність коду, але за бажання параметри можна розмістити безпосередньо у виклику dojo.xhrGet . Як бачите, цей приклад схожий на приклад YUI з деякими цікавими особливостями. По-перше, впадає у вічі відсутність викликів document.getElementById . Отримання елемента по ID - часта практика і, звичайно, якщо в слові більше 20 букв, в ньому легко зробити помилку! Багато бібліотек допускають скорочення в тій чи іншій формі, і в Dojo це dojo.byId . Нехай це не так коротко, як $ в Prototype, але все ж таки величезний крок вперед. Знову ж таки, власне звернення до сервера буде виконано при виклику методу validate.

Потужність селекторів CSS

YUI та селектори CSS

YUI у своїй утиліті Selector надає всі можливості селекторів CSS версії 3. По суті, ви створюєте запит до певного селектора CSS і отримуєте набір елементів, відповідних цьому критерію. Приклад наведено у лістингу 3.

Лістинг 3. Селектори CSS у YUI

В даному випадку ми шукаємо елементи в стилі заголовка, а потім застосовуємо приймач подій до кожного елемента, що повертається.(Докладніше про це ― у наступному розділі). Як бачите, це компактний та потужний спосіб вилучення елементів. У цьому коді метод toggleSection викликається щоразу, коли натискають на елемент у стилі заголовка.

Dojo та селектори CSS

У Dojo є не менш потужний механізм селекторів. Його реалізація теж називається query, і ви знову ж таки передаєте йому селектор CSS, а він повертає колекцію (див. листинг 4).

Лістинг 4. Селектори CSS в Dojo

Кожен елемент має стиль заголовка і колекція перебирається методом ForEach із застосуванням приймача подій до кожного елемента.

Обробка подій

Поки елемент не завантажений, не можна прив'язати до нього подію, але як дізнатися, що це сталося? Dojo та YUI пропонують для цього допоміжні методи! У YUI є

У кожному випадку ці помічники можна використовувати для того, щоб подія прикріплювалася, коли документ готовий. Є й інші способи розв'язання цього завдання, але деякі з них так само зрозумілі, як ці.

Віджети: вікна, елементи вибору дати тощо.

Палітра сучасного Web-дизайнера є досить обмеженою: є текстові поля, текстові області, кнопки. і, звісно, ще дещо. Знову ж таки, коли браузер щось не дозволяє, на допомогу приходить розробник бібліотек. Сьогодні у вашому розпорядженні є майже все, що є в настільних додатках. Є елементи вибору дати, меню, дерева, повзунки, вікна та багато іншого. Справжній ріг достатку! Подивимося, як вирішено елемент вибору дати в YUI та Dojo.

Вибір дати в YUI

YUI забезпечує дуже багатий набір елементів керування та віджетів, які можна використовувати у своїх додатках. Введення дати вручну загрожує помилками, і більшість користувачів звикли до спеціального елементу. У YUI є відмінний елемент виборудати, що знаходиться у компоненті Calendar (див. листинг 5).

Лістинг 5. Вибір дати в YUI

Тут багато чого відбувається, але більшість вам вже знайома. Ви створюєте віджет календаря за допомогою дзвінка YAHOO.widget.Calendar і налаштовуєте приймач подій на полі birthday, що змушує з'являтися календар, коли воно у фокусі. Метод handleSelect поміщає значення, вибране користувачем, у полі birthday. Але це лише верхівка айсбергу. У календарі YUI дуже багато налаштувань, до того ж, він підтримує інтернаціоналізацію.

Вибір дати в Dojo

у полі, для якого потрібно вибрати дату. Додавши два рядки з лістингу 6, ви отримуєте календар майже без будь-яких зусиль!

Лістинг 6. Вибір дати в Dojo

Отримання довідки

Якій би бібліотеці ви не віддали перевагу, в якийсь момент вам знадобиться допомога. І YUI, і Dojo містять велику інтерактивну документацію, від повноцінних підручників до докладних, покрокових прикладів. По кожній бібліотеці написано багато книг – для тих, хто воліє тримати в руках фізичний артефакт, і в обох є активні спільноти, де охоче відповідають на запитання. Найкраща відправна точка – власні Web-сайти цих бібліотек (див. посилання в розділі Ресурси).

Висновок

У цій короткій статті йдеться багато про що, і треба визнати, що вона дає дуже поверхове уявлення про можливості двох видатних бібліотек. Якщо ви ще нічого не використовуєте, я сподіваюся, що я переконав вас спробувати Dojo або YUI. Кожна з цих бібліотек заслужено має пристрасних послідовників, тому пограйте і подивіться, як вони допомагають програмісту надати користувачам максимальні зручності.