Как написать плагин jQuery

26-04-2018Время чтения ~ 3 мин.jQuery и JavaScript 14197

Недавно, в процессе создания лендинга, столкнулся с проблемой — нужно было разместить «аккордион». Это даже не плагин, а просто набор функций jQuery. Постепенно код усложнялся и в какой-то момент я понял, что нужно его оформить отдельным плагином. Это упрощает его поддержку и можно дорабатывать по необходимости.

Я никогда не писал jQuery-плагины, поэтому пришлось немного погуглить и найти примеры и туториалы. По какой-то неведомой причине, практически все руководства содержат невероятное количество лишней информации, где уже на 2-минуте прочтения возникает путаница, поскольку подразумевают, что читающий прекрасно разбирается и в js, и тонкостях jQuery, что в корне неверно. :)

Поэтому я решил написать своё руководство, рассчитанное на неподготовленного читателя.

Начнём с постановки задачи. Пусть у нас есть некий jQuery-код, который нужно оформить в виде плагина. Не будем усложнять задачу, возьмём что-то совсем простое, например преключение класса элемента по клику (назовём это «первоначальным кодом»).

JS-код:
 
$(".click").click(function(){ 
	$(this).toggleClass('t-red') 
});
 
HTML-код:
 
<div class="click">какой-то текст для переключения</div>

К классу .click мы цепляем обработчик «click», который меняет его css-класс на t-red. Метод toggleClass включает/выключает класс по каждому клику.

После преобразования этого кода в плагин, вызывать его можно будет так:

$(".click").myClick(); 

Это уже типовой вызов jQuery-плагина. Его желательно будет снабдить опциями, чтобы можно было бы задавать произвольный css-класс. Пусть это будет параметр to:

$(".click").myClick({
	to: "t-green"
});

Ну и, кроме этого, было бы здорово задавать css-класс в html-атрибуте data-, что позволит указывать его прямо в html-разметке:

<div class="click" data-to="bg-yellow t-red">какой-то текст для переключения</div>

Почти все jQuery-плагины сейчас строятся по единому шаблону-каркасу. Для сложных плагинов этот каркас дорабатывается для подключения методов и прочих «фишек», но в нашем случае всё очень просто — у нас одна основная функция.

(function($) {
	// функция вызова jQuery-плагина
	$.fn.myClick = function(options) {
		// опции 
		var config = $.extend({}, {
			op1: '',
			op2: ''
		}, options);
		
		function main(e) {
			// это основная функция
		}
		this.each(function() { main($(this)); });
		return this;
	};
})(jQuery);

Строчка $.fn.myClick задаёт то, как будет вызываться плагин извне (myClick). Желательно использовать такое имя, чтобы оно не конфликтовало с другими плагинами.

Опции задаются таким образом, чтобы в случае их отсутствия, им присвоилось какое-то значение по умолчанию.

Функция main() собственно и выполняет основную работу плагина. При вызове плагина, она автоматически будет выполнена в строчке this.each(function() { main($(this)); });. Если вы решите поменять её имя, то не забудьте внести изменения и в этом коде.

Теперь рассмотрим main(). Её парамер e не что иное, как используемый элемент. Наш исходный код переместится в эту функцию в таком виде:

function main(e) {
	e.click(function(){ 
		$(this).toggleClass('t-red') 
	});
}

Этот тот же самый «первоначальный» код, только мы использовали переменную e вместо $(".click").

Теперь добавим опции. Тут всё очень просто:

var config = $.extend({}, {
	to: 't-red'
}, options);

У нас одна опция. Получить её в функции main() можно так: config.to. В данном случае переменная config содержит все опции, а config.to конкретно выбранную. CSS-класс по умолчанию вы можете задать произвольно. Функция main() теперь будет такой:

function main(e) {
	e.click(function(){ 
		$(this).toggleClass(config.to) 
	});
}

Теперь можно задавать опции при вызове плагина, но нам нужно еще добавить возможность их менять/задавать через data-атрибуты. Мы будем использовать штатную возможность jQuery — функцию data(). Она возвращает значение указанного атрибута (без префикса «data-»).

function main(e) {
	
	var to = e.data('to');
	
	if (!to) { to = config.to }
 
	e.click(function(){ 
	 	$(this).toggleClass(to) 
	});
}

Вначале мы получаем data-атрибут «to» в одноименную переменную. Проверяем: если атрибута нет (он не задан), то переменной присваиваем значение из опции.

Получился вот такой плагин:

(function($) {
	$.fn.myClick = function(options) {
		var config = $.extend({}, {
			to: 't-red'
		}, options);
		
		function main(e) {
			var to = e.data('to');
			if (!to) { to = config.to }
			e.click(function(){ 
			 	$(this).toggleClass(to) 
			});
		}
		
		this.each(function() { main($(this)); });
		return this;
	};
})(jQuery);

Подобные простые плагины удобно использовать там, где нужно менять параметры для нескольких блоков на странице.