Паттерн плагина jQuery

[prison47]

Здравствуйте. Разъясните пожалуйста часть конструкции для плагина.
Почти все разобрал что за что отвечает но не понятно концовка. Не могли бы вы объяснить работу строк отмеченных условными комментариями.

;(function($) {

	var defaults = {

	};

	function Nupoll(element, options) {  
		var widget = this;

		widget.config = $.extend({}, defaults, options); 
		widget.element = element;

		this.init();

	}

	Nupoll.prototype.init = function() {

	};

	$.fn.pluginNew = function(options) { 
		new Nupoll(this.first(), options); // ??????????

		return this.first();  // ??????????

	};
} (jQuery) );

[danik.js]

new Nupoll(this.first(), options);

Создается экземпляр Nupoll (вызывается конструктор Nupoll).

this.first() - первый элемент из коллекции.

return this.first() - возвращаем первый элемент, чтобы можно было продолжить цепочку вызовов: $(el).pluginNew().continueChain()

Если плагин должен обработать каждый элемент из коллекции, то обычно делают так:

$.fn.pluginNew = function(options) {
    return this.each(function(){
        // do stuff
    });
}

[prison47]

То есть получается если у меня плагин должен подключатся не к одному к нескольким элементам я использую такой вариант паттерна:

;(function($) {

	var defaults = {

	};

	function Nupoll(element, options) {  
		var widget = this;

		widget.config = $.extend({}, defaults, options); 
		widget.element = element;

		this.init();

	}

	Nupoll.prototype.init = function() {


// код плагина


	};

$.fn.pluginNew = function(options) {
    return this.each(function(){
        // do stuff
    });

	};
} (jQuery) );

[danik.js]

prison47, изучите сначала основы JavaScript, потом уже учитесь делать плагины для jQuery.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script>
    (function($) {
     
    $.fn.pluginNew = function(options) {
        return this.each(function(){
            $(this).css('color', 'red');
        });
     
    };
    
    } (jQuery) );
</script>

<div>Bla bla</div>
<div>Тест</div>
<script>
    $('div').pluginNew();
</script>

[prison47]

Основы я как раз таки изучаю и вот такие конструкции не могу понять, в первом случае код плагина мы пишем в Nupoll.prototype.init = function() {
где уже есть доступ к дом элементу. Во втором случае приведенном вами почему-то все отсекается, тот же конструктор. Если у вас есть ссылки где можно подробнее почитать на доходчивом языке, буду признателен

[danik.js]

Если вы не заметили, в моем "плагине" не используются какие-то собственные методы, опции и прочее.
this.each(fn) проходит по всем элементам коллекции и вызывает для каждого элемента функцию fn, устанавливая в качестве контекста этот элемент. Делайте с этим элементом что хотите. Я например просто изменил css свойство. Вы можете создавать какие-то объекты к примеру.

код плагина...

Это все и есть - код плагина. Разве нет?

где можно подробнее почитать

Посмотрите исходники каких-нибудь плагинов jQuery

[prison47]

Спасибо

[prison47]

Подскажите пожалуйста. В плагине вешаю обработчики клика через on() на ново появляющиеся элементы. Подключаю плагин к нужному элементу. Все работает. Но если нужно подключить плагин на еще один элемент например для срабатывания с другими параметрами, то обработчики клика начинают дублироваться. Если подключить на три элемента, то утраиваются. Что я неправильно делаю? Или многократное подключение плагина вообще не должно быть? Тогда как сделать срабатывание на нескольких элементах с разными параметрами?

[рони]

prison47,
обычно метку ставят если элемент обработан плагином то второй раз его ненадо -- если нужно по новой метку убирают навешивают по новой обработчики и ставят метку

[prison47]

А подробней если можно? Не совсем понимаю