Використання подій у jQuery плагінах

Основною метою цієї статті є: показати відмінності між традиційною реалізацією jQuery плагіна та реалізацією із застосуванням подій. У статті буде: про традиційну реалізацію jQuery плагіна, про роботу з подіями в jQuery, і спроба замінити методи або callback-функції плагіна подіями.

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

1. Теорія 1.А. Традиційний плагін jQuery 1.Б. Область видимості змінних 1.В. Робота з подіями у jQuery 1.Г. Застосування подій у плагінах 1.Д. Недоліки подій 2. Приклад простого застосування з дробленням на плагіни 3. Висновок, висновок 4. Список літератури

1.А. Традиційний плагін jQuery

Плагін в jQuery - це обгортка над елементом, що реалізує деякий функціонал (поведінка), яке зазвичай обмежено елементом на який навішується плагін.

Плагін може бути практично будь-який елемент або група елементів на сторінці: slider зображень, діалогове вікно, кнопка, видозмінений checkbox, видозмінений select, динамічний список елементів, і так далі.

Створення традиційного jQuery плагіна завдання досить тривіальне. Для цього необхідно додати до простору $.fn новий метод.

Приклад 1 (створення плагіна myPlugin):

Така структура чудово підходить для створення простих плагінів, від яких вам не потрібно отримувати дані.

Але часто нам необхідно отримати дані чи стан плагіна. Хорошим прикладом є DatePicker.

Мені відомо кілька рішень для отримання даних:

  • Р.1.А.Виклик методу (або функції).Приклад 2:$('input.date').datePicker('getDate'); $('input.date').datePicker('isDisabled') .Недолік:немає можливості відстежити зміни (наприклад, користувач вибрав інше значення);
  • Р.1.Б.Передача callback-функції.Приклад 3:$('input.date').datePicker(); $('input.date').datePicker() .Недолік:Ускладнення реалізації плагіна: необхідно реалізувати виклик callback-функції, підписку на подію кількох слухачів;
  • Р.1.В.Події.Приклад 4:$('input.date').on('change', onChangeHandler); $('input.date').on('disable', onDisableHandler) . Докладніше про переваги і недоліки далі.

1.Б. Область видимості змінних

Проблема реалізації методівР.1.АіР.1.Бу тому, що з наступному виклику $(element).datePicker(. ) повторно виконується «конструктор» плагіна . Звичайно це легко відстежується шляхом перевірки параметрів, що передаються: якщо переданий об'єкт (опції) — це ініціалізація; якщо переданий рядок — потрібний виклик методу. Як то кажуть, «баг це чи фіча» — поки що не вистачає досвіду зрозуміти.

Але я зіткнувся із проблемою областей видимості змінних.

На цьому етапі все просто: створюємо плагін, який виводить дату з опцій.

Але проблема виникає, коли необхідно помістити на сторінку більше одного плагіна цього типу.

Як бачимо з прикладу 6 - змінна options, яка була винесена за межі плагіна - перезаписувалася даними при ініціалізації плагіна 2.

Рішення для прикладу 6:

  • Р.2.А. В об'єкті options зберігати дані для ініціалізації всіх плагінів (ускладнення коду);
  • Р.2.Б. Кріпити дані ініціалізації до DOM-об'єкта (на мій погляд: непогане рішення);
  • Р.2.В.Використання подій. Виклик методів за допомогою $(.).trigger(.). Наприкінці я наведу приклад, який позбавлений цього недоліку.

1.В. Робота з подіями у jQuery

За допомогою бібліотеки jQuery ми можемо як створювати «слухачів» для подій $('.link').on('click', onClickHandler) , так і викликати (провокувати) події $('.link').trigger('click' ).

Звернемося до документації, подивимося параметри обох функцій:

Загалом функція on має параметри:

  • events— список подій, які необхідно слухати;
  • handler— функція-обробник події, яка буде викликана під час здійснення будь-якої події зі списку events.

Функція trigger має параметри:

  • eventType- назва події, яку необхідно викликати;
  • extraParameters- масив або об'єкт, що містить параметри, які необхідно передати обробнику події.

1.Г. Застосування подій у плагінах

Щоб позбавитися проблеми з областю видимості змінних (описаної у прикладіП.6) і проблемою з навішуванням кількох слухачів (описаної у рішенніР.1.Б) я вдався до використання подій і обгорток, реалізованих у jQuery (1.В).

Що ми отримали:

  • «конструктор» викликається лише один раз;
  • ми можемо навісити безліч слухачів, які отримуватимуть інформацію про стан плагіна;
  • змінні, які стосуються плагіну перебувають у тілі функції, і залежить від інших ініціалізацій даного плагіна.

1.Д. Недоліки подій

Звичайно, цей підхід змінює звичний підхід до роботи з плагіном, я маю на увазі відсутність традиційних методів отримання даних, наприклад $(. ).datePicker('getDate')Але на цьому етапі мого особистого розвитку, як програміста, цей спосіб вирішує деякі мої проблеми. Я особисто, вважаю цей похід досить універсальним, і з вадами поки що не стикався — якщо читач знає про таких, будь ласка не мовчите, і хочу так само попросити писати якомога доступніше і адекватніше.

2. Приклад простого додатка з дробленням на плагіни

Для тренування та обкатки подій написав кілька маленьких Ajax-додатків:

3. Висновок, висновок

На прикладах я показав створення jQuery плагіна, визначив актуальні для мене проблеми передачі даних та отримання даних з плагіна, показав застосування подій та обгорток jQuery, і торкнувся теми створення програми, що активно використовує плагіни jQuery та події.

Я не торкнувся теми спливу подій по дереву DOM, а також хотілося приділити більше уваги створенню програм з використанням подій. Але якщо на те буде карма — обов'язково напишу продовження.

Ще раз хочу звернутися до людей, які створюють професійні клієнтські програми: я люблю критику, і хочу вислухати думку про цей підхід, та й загалом хотілося б дізнатися більше про створення клієнтських програм з перших вуст. Тому пишіть — буду вдячний.