Как при второй инициализации плагина передать только параметры?

Question

[Егор Астрейко]

Всем привет, при создании своего плагина, появилась проблема (
Суть плагина
У меня на странице много селектов, сначала для всех инициализировал плагин:
$(document).find("select").dropdown();
Но для определенных селектов мне нужно дописать определенные параметры для плагина:

$(document).find("select").dropdown({
   effect: "animation-random"
});

Но почему то это все игнориться (

Ссылка на стартовый паттерн для плагина

var pluginName = "defaultPluginName",
   defaults = {
      propertyName: "value" // тут находятся все параметры
   };

вот тут весь движ по созданию оберток и элементов
init: function() {},

а вот тут нужно что то поменять:

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

Answer 1

[Ihor Bratukh]

Это называется метод. Создайте метод set передайте в него селектор и параметры. В методе сложите переданные параметры и те что были и переинциализируйте плагин, то есть запустите init с новыми параметрами.
Вот вам шаблон-пример:

(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

[Ihor Bratukh]

Попробуйте вставить этот плагин в консоль тостера, а потом вызвать:
$('*').plugin();
После инициализации можете применить метод set и изменить параметры:

$('*').plugin('set', {
    color: 'green'
});

[Егор Астрейко]

BRAGA96, А как в инит передать $(document) ?

[Егор Астрейко]

BRAGA96, Еще вопрос, как мне изменить функцию:
В defaults есть функция:

defaults = {
		startShow: function() {}
	}

как мне сделать, что бы при set выполнялось что я там укажу:

('set', {
			startShow: function(event, parent) {
				console.log(parent);
				console.log("obj");
			}
		});

[Ihor Bratukh]

Егор Астрейко, document передавать не нужно, он и так там доступен, это же глобальная переменная.
Передать функцию очень просто:

$('.my-block').plugin('set', 'startShow', function(event, parent) {
	console.log(parent);
	console.log('obj');
});

Или так:

$('.my-block').plugin('set', {
	startShow: function(event, parent) {
		console.log(parent);
		console.log('obj');
	}
});

[Егор Астрейко]

BRAGA96, столкнулся с проблемой, что если через set, то эта функция игнориться и не работает document (((
вот ссылка на песочницу

Что я не так сделал ?(

[Ihor Bratukh]

1) В главную IIFE функцию вы принимаете 4 аргумента: $, window, document, undefined а передаете в неё только: jQuery и window. В коде этой функции document будет undefined. Используйте такую конструкцию:

(function($, undefined) {
	// ...
})(jQuery);

Или передавайте все аргументы, которые принимаете.

(function($, window, document, undefined) {
	// ...
})(jQuery, window, document);

2) Зачем сразу после инициализации плагина вы используете set метод? Он нужен для каких-то событий, кнопок и т.д, но никак при инициализации.

$("select").plugin({
	startShow: function(event, parent) {
		console.log(parent);
	});
});

3) Все ваши функции это по сути callback события, их принято называть с приставкой on: onStart, onEnd.
Так же вы можете создавать свои события:

function eventTrigger($element, name, params) {
	setTimeout(function() {
		$element.trigger(name + '.' + plugin.name, params);
	});
}

eventTrigger($('.block'), 'myEvent', [true, 'string']);

$('.block').on('myEvent.pluginName', function(event, boolean, string) {
	// ...
});

P.S но это тот еще костыль, прочитайте про создание своих событий в jQuery

4) DOM. У вас очень плохая архитектура построения DOM плагина. Куча созданий элементов, куча вставок в DOM ( ~10 append, append в цикле!). Вставка в DOM должна быть только одна. Используйте меньше строк в названиях классов/свойств, запишите их все в объект. Редактировать такой код будет не удобно.

5) Context. У Вас одинаковое DOM дерево для всех инициализаций плагина. Вы всегда оталкиваетесь от переменной container и у вас с этим проблем нет, но может вы не знали о передаче контекста и это будет вам полезно: $('.container', $('.block')) = $('.block').find('.container')

6) DATA. Чтобы разгрузить DOM от атрибутов используйте data - $('.block').data('name', { params... }) так как сделано с setting в методе init

7) ПЕРЕМЕННЫЕ. Чтобы Вы и другие люди, которые будут читать Ваш код понимали что делается используйте алиас $ для название переменных в которые содержится jQuery коллекция элементов. Чтобы было понятно что в этой переменной не число, не объект, а именно dom элемент, например - $container

8) ФУНКЦИИ. У вас на ~270 строк ни одной функции, такой код будет очень сложно читать и поддерживать. Используйте функции. Можете использовать замыкания и объявлять функции в методе init. В этих функциях у вас будут доступны переменные которые объявлены в этом методе, например $this, setting и их не нужно будет передавать в каждую функцию.

var methods = {
	init: function($this, setting, type) {
		// ...
		function test() {
			console.log($this, setting);
		}
	}
};

9) МЕТОДЫ. Не забывайте, что Ваши методы это просто свойства объекта и Вы можете их разделить для удобства и наглядности.

var plugin = {
	name: 'plugin',
	data: {
		setting: 'setting'
	}
}, defaults = {
	containerClass: 'dropdown'
}, methods = {};

methods.init = function($this, setting, type) {
	//...
};

methods.set = function(key, value) {
	//...
};

methods.get = function(key) {
	//...
};

10) СОБЫТИЯ. В коде метода init вы объявляете событие. Не забывайте что при вызове методов таких как set эти события повесятся еще раз, используйте .one или контролируйте эти моменты. Не забывайте использовать nameSpace ( 'myEvent.pluginName' ), чтобы не переопределять другие события и лучше контролировать свои, а в методе destroy и вовсе их отвязать одной строкой $('.block').off('.pluginName')

11) СВОИ МЕТОДЫ. Не забывайте, что вы можете создавать свои методы, такие как set, get и т.д. У Вас плагин-select и я не вижу события, например select - $('select').plugin('select', 'my-value'). Метод, чтобы выбрать у нужное значение в нужного select'а, метод чтобы получить значение и т.д. Эти же методы вы можете использовать внутри init-метода для своего же удобства и универсальности.

12) SET. Зачем Вы взяли в $.each метод set? Не нужно.

[Егор Астрейко]

BRAGA96, ответ на 12, сделал так, как мне нужно сразу для нескольких элементов

[Егор Астрейко]

BRAGA96 , а почему не работает destroy ?