Кто может оценить качество jQuery плагина?

Question

[Андрей Кварцов]

Добрый день!

Вот я решил написать свой jQuery плагин. Написал его, не без помощи сообщества тостера. Протестировал как мог, всё вроде хорошо работает, функционал меня полностью устраивает, глюков пока не нашёл, но уверен что со временем они будут... и всё как бы хорошо.

Но, я стал задумываться над качеством кода и правильно ли я решал какие-то проблемы. И тут передо мной встал вопрос: а кто может дать оценку правильности выполнения моего плагина? Кто может дать оценку качеству кода моего плагина?

Я бы хотел улучшать его и исправить все не правильно сделанные моменты, но где взять людей, которые смогут рассказать почему что-то неверно сделано и как сделать правильно?

P.S. Вот ссылка на код плагина
P.P.S. Пожалуйста, не пишите, чтобы я просто использовал готовые плагины... Мне это интересно.

Answer 1

[Ihor Bratukh]

Я написал около 5-ти плагинов и вывел для себе такой шаблон. Если есть не понятные моменты, спрашивай, прокомментирую.

(function($, window, undefined) {
	'use strict';

	var plugin = {
		name: 'plugin',
		data: {
			setting: 'setting'
		}
	}, defaults = {
		color: 'red',
		background: 'black'
	};

	var methods = {
		init: function($this, setting, type) {
			var setting = function() {
				var params = $.extend({}, defaults, setting);
				$this.data(plugin.data.setting, params);
				return params;
			}();
			/* START */
			$this.css({
				color: setting.color,
				background: setting.background
			});
			/* END */
		},
		set: function(key, value) {
			var setting = $(this).data(plugin.data.setting);
			switch (typeof key) {
				case 'string':
					setting[key] = value;
					break;
				case 'object':
					setting = $.extend(true, {}, setting, key);
					break;
			}
			methods.init($(this), setting, 'update');
		},
		get: function(key) {
			var setting = $(this).data(plugin.data.setting);
			if (key) {
				return Object.getOwnPropertyDescriptor(setting, key).value;
			} else {
				return setting;
			}
		},
		destroy: function() {
			$(this).removeData(plugin.data.setting).fadeOut(200, function() {
				$(this).empty().show();
			});
		}
	};

	$.fn[plugin.name] = function(setting, key, value) {
		if (typeof setting === 'object' || !setting) {
			return $.each(this, function() {
				methods.init($(this), setting, 'init');
			});
		} else if (typeof setting === 'string') {
			switch(setting.toLowerCase()) {
				case 'set':
					return methods.set.call(this, key, value);
				case 'get':
					return methods.get.call(this, key);
				case 'destroy':
					return methods.destroy.call(this);
			}
		}
	};

})(jQuery, window);

Использование:

// Инициализация с параметрами по умолчанию
$('.block').plugin();
// или своими параметрами
$('.block').plugin({
	color: 'green',
	background: 'white'
});

// Метод SET, изменить параметры и переинциализировать плагин
$('.block').plugin('set', 'color', 'red');
// или передать объект новых параметров
$('.block').plugin('set', {
	color: 'yellow',
	background: 'black'
});

// Метод GET, получить параметры плагина
$('.block').plugin('get', 'color');
// или получить все параметры
$('.block').plugin('get');

// Метод DESTROY, отвязать плагин
$('.block').destory();

Comments

[Андрей Кварцов]

1. Метод реализации плагина через функцию конструктор мне показался более правильным и более функциональным.
2. Я всё же задавал вопрос кто может мне дать рекомендации по моему коду, а не как нужно реализовать плагин другим способом, но всё равно спасибо за пример.
3. Всё же для общего развития интересно: как вашим методом реализовать события?

Сейчас в моём плагине есть несколько возможностей, как отрабатывать по событиям:

var myModal = new Kmodal('#myModal', {
    ...,
    on: {
        open: function() {
            //code
        },
        close: function() {
            //code
        }
});

Либо тогда когда это нужно:

myModal.on('open', function() {
    //code
});

Так же можно без проблем реализовать события: afterOpen, beforeOpen и т.д.

Я уверен, что в вашем методе к разработке плагинов всё это тоже можно реализовать, но хотелось бы увидеть пример.

И если можно, скиньте код одного из ваших плагинов, для изучения.

[Ihor Bratukh]

Андрей Кварцов,
1) через функцию-конструктор делают просто javascrip плагин, как часто вы видите jQuery плагин, который инициализируется как new Plugin(). Если бы Вы написали пару своих функций типа append, то jQuery Вам будет не нужна.
3) Сделать callback функцию в плагине не проблема, опередлить её в настройках и вызывать в коде в нужном месте. В jQuery событие можно генерировать так:

$this.trigger('myEvent.nameSpace', [...extraparams])

и вызывать

$('.my-block').on('myEvent.nameSpace', function(event, extraparams) {
// code
});

4) К сожелению не могу скинуть, они все корпоративные для внутренних нужд компании, в которой я работаю.