Основи на jQuery плъгините - Част 1

javascript | jqslider | jquery | плъгин | програмиране | урок
Тази публикация е част от серията "Основи на jQuery плъгините":
  1. Основи на jQuery плъгините - Част 3
  2. Основи на jQuery плъгините - Част 2
  3. Основи на jQuery плъгините - Част 1

Основи на jQuery плъгините - Част 1

В този урок от няколко части ще научим основите на създаването на плъгини за jQuery. С цел по-лесно усвояване на темата ще разработим собствен плъгин. Модула, който ще създадем е доста тривиален - галерия с изображения. Кода е сравнително кратък и прост, но за сметка на това е напълно достатъчен за изучаването на основите по темата.

Кода на този слайдер може да намерите в GitHub.

Редакция: Демо на проекта може да видите тук.

Важно е да се спомене, че има много начини да се създаде подобен модул. Лично аз използвам за база jQuery Boilerplate, но с известни модификации.

Като начало създайте директория с име slider. Това е директорията, която ще ползваме във всички части на урока.

Като за начало ще създадем най-базовия скелет на плъгина. Създаваме файл с име script.js, в който поставяме следния блок код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
;(function ($, window, document, undefined) {
var pluginName = 'slider';
var defaults = {
};

function Plugin(element, options) {
this.element = element;
this.$element = $(element);
this.options = $.extend({}, defaults, options);

this.init();
}

Plugin.prototype.init = function() {
};

$.fn[pluginName] = function(options) {
return this.each(function() {
if(!$.data(this, 'plugin_' + pluginName)) {
$.data(this, 'plugin_' + pluginName, new Plugin(this, options));
}
});
};
})(jQuery, window, document);

Като цяло структурата представлява функция, която се извиква при зареждане на файла, в който се намира.

На първия ред прави впечатление символа точка и запетая (;) в началото. Преди всичко е важно да кажем, че поставянето точка и запетая, когато от пред няма нищо не е синтактична грешка. От друга страна това ни предпазва от грешка, когато модула ни е поставен в един файл с други подобни модули, а преди него не е поставен такъв символ.

Следващия акцент ще поставим на променливата undefined, която се явява четвърти параметър на функцията ни. Тя също не е необходима, но ни гарантира, че няма да подадем по случайност параметри, които не са ни необходими.

Подаваме window и document, като параметри, въпреки, че принципно са глобални променливи, понеже това ни позволява при минимизиране на файла да презапишем тези променливи с нещо по-кратко.

На втори ред задаваме името на плъгина, което се явява и функцията, с която го инициализираме.

Следващата променлива е списък с опциите за настройка на приставката, заедно със стойностите им по подразбиране.

На ред шест декларираме същинския плъгин, като тялото на функцията се явява конструктор на обекта.

На ред 7 и 8 запазваме референция към DOM елемента, като на по-горния ред е рефернция към чистия DOM елемент, а на по-долния е този, обработен от jQuery. То ест, ако искаме да зададем височината на елемента по класическия начин ще използваме, this.element.style.height = '100px';, а ако искаме да ползваме нотацията на jQuery ще напишем this.$element.css('height', '100px');.

Следва извикване на стандартен метод на jQuery, който ни дава обединение, между стандартните опции, и тези подадени, като параметър на плъгина.

Конструкцията, започваща на ред 17 декларира плъгина, като модул на jQuery, а самото тяло на функцията ни позволява да извикаме плъгина само ведъж за всеки елемент.

Ако сте разбрали всичко до тук, сте разбрали и най-важното за създаването на jQuery плъгините и сте напълно готови за следващите части на урока.