Как правильно делать опции при написании плагина?

Question

[Виталий Киренков]

Здравствуйте. Пишу плагин калькулятора. Если калькулятор один - то проблем вообще никаких нету, а вот если несколько, то начинаются конфликты.

(function($, global) {
	$.fn.mortgageCalc = function(options) {
		return this.each(function(index, item){
				defaults = {
					flatPriceSlider 		: 	$('.apartment_price-slider', item),

То есть так - оно работает, только проблема в том, что пользователи не должны писать ", item)". Отсюда и вопрос, как обращаться к элементам, в рамках класса вызова которого они находятся.

Есть конечно вариант, в каждом месте где они находятся предварительно писать

this.children(defaults.flatPriceSlider).someFunc();

но кажется это неправильный вариант.

Answer 1

[Алексей Николаев]

Почему бы вам не использовать jquery boilerplate? Это грамотная заготовка для создания плагина, с опциями и цепочкой (заодно сможете на основе кода разобраться в основных принципах). А вообще, не вижу проблемы - в философии jquery вы всегда будете работать с переданным в плагин элементом (например, через цепочку - главную фишку jquery), и следовательно, используя замыкание, для каждого элемента на странице будет создан собственный объект выполнения со своей областью видимости.

P.S. Также рекомендую при создании событий использовать пространство имен.

P.P.S. Вы (судя по коду) всегда обращаетесь к определенному классу (т.е. заново ищете элемент на странице), а надо обращаться к переданному в функцию объекту. Это исключит конфликты.

Comments

[Виталий Киренков]

Спасибо за ссылочку. Думаю есть, что из неё можно выдернуть. Могли бы ещё показать вариант(пример) по вашей рекомендации касательно пространства имён?

[Алексей Николаев]

Виталий Киренков - во-первых, определите системное имя для вашего плагина, и используйте его для всех подобных случаев. Данные (преимущественно рабочие) лучше хранить в создаваемом методом data() объекте. Суть в том, что с подобным подходом структура становится несколько более наглядной за счет дополнительного "черного ящика" в виде пространства имен (по имени вашего плагина). Не возьмусь судить, какой вариант более красив (использовать data() или простые объекты), но на мой взгляд вариант с data удобнее и красивее. Вы сможете легко очистить все данные одним методом (removeData), быстро получить их, что на мой очень наглядно и просто.

Насчет собственно событий - тут просто все, пишите не "click", а "click.your-plugin", Актуально для всех типов событий. Опять же, при удалении события вы удалите лишь те, что созданы вами (а при использовании паттерна цепочки - еще и лишь те, что привязаны к конкретному экземпляру). Профиты от такого подхода очевидны

[Виталий Киренков]

Алексей Николаев: Спасибо за советы. Завтра уже на досуге посмотрю метод data, раньше с ним как то не приходилось иметь дело. Да и по всем ссылкам, о том, как написать плагин - нет этого(( А по сути данный шаблон правильнее.