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

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

;(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) );

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
    });
}

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

;(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) );

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>

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

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

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

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

Спасибо

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

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

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