Якщо ви читали попередні статті з цієї серії, то ви напевно вже пробували розробляти свій плагін, якщо ні, то можемо почати разом…

Матеріали даної статті включені в підручник «jQuery для початківців». Підручник розповсюджується безкоштовно, і супроводжується інтерактивними прикладами.

Для початку згадаємо, для чого нам потрібні плагіни? Моя відповідь — створення повторно використовуваного коду, і так — з зручним інтерфейсом. Давайте напишемо такий код, ось проста задачка: «По кліку на параграф, текст повинен змінитися на червоний»

Javascript і навіть не jQuery

Щоб не забувати витоків — почнемо з реалізації на нативному javascript’е:

var loader = function () {
// знаходимо всі параграфи
var para = document.getElementsByTagName (P’);
// перебираємо всі, і вішаємо обробник
for (var i=0,size=para.length;iДаний код не є кроссбраузерным, і написаний з метою зайвий раз підкреслити зручність використання фреймворку

jQuery, але ще не плагін

Тепер можна цей код спростити, підключаємо jQuery і отримуємо наступний варіант:

$(document).ready(function(){
$(‘p’).click(function(){
$(this).css(‘color’, ‘#ff0000’);
})
});

Таки jQuery плагін

З поставленим завданням ми впоралися, але де тут повторне використання коду? Або якщо нам треба не червоний, а в зелений перефарбувати? Ось тут починається найцікавіше, щоб написати простий плагін досить розширити об’єкт $.fn:

$.fn.mySimplePlugin = function () {
$(this).click(function(){
$(this).css(‘color’, ‘#ff0000’);
})
}

Якщо ж писати більш грамотно, то нам необхідно обмежити змінну $ тільки нашим плагіном, а так само повертати this, щоб можна було використовувати ланцюжка викликів (т. зв. chaining) , робиться це наступним чином:

(function($) {
$.fn.mySimplePlugin = function(){
// код плагіна …
return this;
};
})(jQuery);

Внесу невелике пояснення про те, що відбувається, код (function($){…})(jQuery) створює анонімну функцію, і тут же викликає її, передаючи в якості параметра об’єкт jQuery, таким чином всередині анонімної функції ми можемо використовувати псевдонім $ не боячись за конфлікти з іншими бібліотеками — так як тепер $ знаходиться лише в області видимості нашої функції, і ми маємо повний контроль над нею

Додамо опцію вибору кольору і отримаємо робочий плагін:

(function($) {
// значення за замовчуванням – ЗЕЛЕНИЙ
var defaults = { color:’green’ };
// актуальні параметри, глобальні
var options;
$.fn.mySimplePlugin = function(params){
// при багаторазовому виклику функції налаштування будуть зберігатися, і заміщатися при необхідності
options = $.extend({}, defaults, options, params);
$(this).click(function(){
$(this).css(‘color’, options.color);
});
return this;
};
})(jQuery);

Виклик:

// перший виклик
$(‘p:first,p:last’).mySimplePlugin();
// другий виклик
$(‘p:eq(1)’).mySimplePlugin({ color: ‘red’ });

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

// актуальні налаштування, будуть індивідуальними при кожному запуску
var options = $.extend({}, defaults, params);

Працюємо з колекціями об’єктів

Тут все просто, достатньо запам’ятати — this містить об’єкт jQuery з колекцією всіх елементів, тобто :

$.fn.mySimplePlugin = function(){
console.log(this); // jQuery
console.log(this.length); // кількість елементів
return this;
};

Якщо ми хочемо обробляти кожен елемент то зробимо наступну конструкцію:

// необхідно обробити кожен елемент колекції
return this.each(function(){
$(this).click(function(){
$(this).css(‘color’, options.color);
});
});
// попередній варіант трохи надмірний,
// т. к. всередині функції click і так є перебір елементів
return this.click(function(){
$(this).css(‘color’, options.color);
});

Знову ж таки нагадаю, якщо ваш додаток не повинен щось повертати з вашої задумом — повертайте this — ланцюжка викликів в jQuery це частина магії, не варто її ламати

Публічні методи

Так, у нас написаний крутий плагін, треба йому ще докрутити функціоналу, нехай колір регулюється декількома кнопками на сайті. Для цього нам знадобиться якийсь метод «color», який і буде у відповіді за все. Зараз наведу приклад коду готового плагіна — будемо палити разом:

// значення за замовчуванням
var defaults = { color:’green’ };
// наші публічні методи
var methods = {
// ініціалізація плагіна
init:function(params) {
// актуальні налаштування, будуть індивідуальними при кожному запуску
var options = $.extend({}, defaults, params);
return this.click(function(){
$(this).css(‘color’, options.color);
});
},
// зміна кольору
color:function(color) {
$(this).css(‘color’, color);
},
// скидання кольору
reset:function() {
$(this).css(‘color’, ‘black’);
}
};
$.fn.mySimplePlugin = function(method){
// трохи магії
if ( methods[method] ) {
// якщо запитуваний метод існує, ми його викликаємо
// всі параметри, крім імені методу прийдуть на метод
// this так само перекочує на метод
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === ‘object’ || ! method ) {
// якщо першим параметром йде об’єкт, або зовсім порожньо
// виконуємо метод init
return methods.init.apply( this, arguments );
} else {
// якщо нічого не вийшло
$.error( ‘Метод’ + method + ‘” не знайдений в плагіні jQuery.mySimplePlugin’ );
}
};

Тепер ще невеликий приклад використання даних методів:

// виклик без параметрів – буде викликаний init
$(‘p’).mySimplePlugin();
// виклик методу color і передача кольору в якості параметрів
$(‘p’).mySimplePlugin(‘color’, ‘#FFFF00’);
// виклик методу reset
$(‘p’).mySimplePlugin(‘reset’);

Для розуміння цього шматочка коду, ви повинні розібратися лише з змінної arguments, і з методом apply (тут їм цілі статті присвятили — дерзайте)

Про обробниках подій

Якщо ваш плагін вішає якийсь обробник, то краще всього (читай завжди) даний обробник повісити в своєму власному namespace:

return this.bind(“click.mySimplePlugin”,function(){
$(this).css(‘color’, options.color);
});

Цей фінт дозволить в будь-який момент забрати всі ваші обробники, або викликати тільки ваш, що дуже зручно:

// викличемо лише наш обробник
$(‘p’).trigger(“click.mySimplePlugin”);
// прибираємо всі наші обробники
$(‘p’).unbind(“.mySimplePlugin”);

Використання data

Якщо з якоїсь причини ви ще не знайомі з data — то раджу прочитати і засвоїти негайно. Якщо в двох словах — це реєстр даних, і всі дані прив’язані до якого-небудь елементу краще зберігати в ньому, це ж правило стосується і плагінів. Якщо вам треба зберегти стан плагіна — використовуйте data, якщо необхідний кеш — використовуйте data, якщо вам необхідно зберегти … ну думаю зрозуміло. Наведу ще приклад пов’язаний з ініціалізацією:

// функція init
function() {
var init = $(this).data(‘mySimplePlugin’);
if (init) {
return this;
} else {
$(this).data(‘mySimplePlugin’, true);
return this.bind(“click.mySimplePlugin”,function(){
$(this).css(‘color’, options.color);
});
}
}

Джерела

  • Plugins/Authoring
  • jQuery Plugin Patterns
  • A Plugin Development Pattern
  • Learning jQuery: Your First jQuery Plugin, “BubbleUP”

Цикл статей

  • jQuery для початківців
  • jQuery для початківців. Частина 2. JavaScript Меню
  • jQuery для початківців. Частина 3. AJAX
  • jQuery для початківців. Частина 4. Селектори
  • jQuery для початківців. Частина 5. Ефекти
  • jQuery для початківців. Частина 6. Події
  • jQuery для початківців. Частина 7. Пишемо плагіни
  • jQuery для початківців. Частина 8. Розширюємо фільтри
  • jQuery для початківців. Частина 9. Пишемо плагіни анімації