Использование событий в jQuery плагинах

[jMas]

Пожалуйста, пишите о минусах, за что поставили. Если статья действительно плохая — перенесу в черновики и не буду так сказать «мозолить» глаза.

[SowingSadness]

Почему любители разработать плагины делают функций, а не используют jQuery UI?
Там уже есть из коробки:
— работа с всплывающими событиями
— прототипирование от других плагинов
— методы генерации событий от определенного DOM узла
и большой + стандартизация работы с виджетами — API

[jMas]

Скорей всего объяснение: из-за нехватки опыта, и не-знания, не-понимания событийной модели.
Когда ознакомился с событийной моделью у меня возникли аналогичные вопросы.

[SowingSadness]

Извините, не понял вас.
Вы сейчас показали «как не надо» писать расширения?

[jMas]

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

С моей точки зрения это может звучать:

1. делают обычные функции вида function myDialog() для отрисовки диалога
2. делают обычные функции вида $.fn.myDialog()

Если вы о первом — опыта и понимания JS ООП нет.
Если второе — не знают о jQuery UI, либо нет желания тянуть лишнюю библиотеку, да иногда есть задачи сложней диалогового окна, либо перерисовки селект-бокса.

[SowingSadness]

вам ответили чуть ниже

[creage]

Вам пора читать документацию.

[jMas]

Спасибо, мне уже посоветовали углубится в этом направлении.

Но в статье, хотелось больше обратить внимание и получить отзывы о событиях.

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

Если подскажите где почитать информацию об этом на русском — буду признателен.

[creage]

Сами по себе, события — это просто средство, одно из многих, применяемых в разработке. Сперва почитайте про паттерны, архитектурные, и ООП — бОльшая часть вопросов отпадет сама собой.

Раз, два.

[SowingSadness]

На мой взгляд это уж совсем не в ту степь. При чем тут ООП и паттерны?

Вообще нужно прочитать про всплытие и погружение событий и поиграться с особенностью работой событий в jQuery UI
Например, если передать в произвольную опцию(foo) callback, а в своём расширение и вызывать через this.__trigger('foo', data), тогда внезапно ваш callback будет вызван.

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

[leshaogonkov]

Сегодня дочитал книжку Адди Османи, по первой ссылке, мне не понравилась, получилась бессвязной какой-то.

[thekip]

Сами минусов вам не ставил, но могу предположить что вам их ставят потому что статья довольно слабая и есть огрехи по теоретической части.

Например в самом начале:

Плагин в jQuery — это обертка над элементом

WTF? Плагин в jQuery это функция которая добавляется в прототип jQuery, и может вообще никак не взаимодействовать с элементом.

И так огрехов в статье достаточно.

От себя могу посоветовать следующее. События — это однозначно хорошо. Система построенная на событиях гораздо гибче таковых на прямых вызовах. Вы идете в верном направлении. Однако стоит еще немного изучить теории и best-practice по созданию плагинов и вообще по Javascript. Например что ваши события желательно вызывать с неймспесом (например triggerHandler('click.myPlugin');)

Касаемо jQueryUI — Безусловно фабрика виджетов JqueryUI хороша, помогает избавиться от многих рутинных вещей, таких как сеттеры/геттеры для опций, или вызов методов если передан не объект а строка и т.п. Но иногда это все не нужно, и хочется сделать плагин с минимальным количеством зависимостей. И в этих случаях я лучше напишу без фабрики JQuery.

А вообще в последнее время я начал писать плагины способ несколько иным чем рекомендует документация jQuery, а именно, я в начале описываю конструктор объекта, затем добавляю в прототип методы, а затем уже заворачиваю это дело в плагин jQuery.

Пример:

   /**
	* Конструктор плагина Multiinput
    * @param {HTMLElement} element - container of multiinput
    * @param {options} options object passed from jquery adapter
    **/
    function MultiInput(element, options){
        var $this = this;
        this.ancestor = $(element);
        this.options = options;
	}
	
	/*Добавляем к конструктору необходимые методы*/
   MultiInput.prototype = {
        /**
        * trigger plugin event
		* Моя реализация событий в плагинах. Я вызываю данный метод, который одновременно вызывает и 
		* коллбэк функцию указанную в опциях и поджигает событие с помощью triggerHandler()
        * @param {string} event  - event name for triggering
        * @param {object} context - ('this' for event handler) this param will be passed to 'call()' function
        * @param {array|object} params - custom arguments for handler
        **/
        triggerEvent: function(event, context, params){
            if(!(params instanceof Array)) {
                params = [params];
            }
       
            this.ancestor.triggerHandler(event, params);
            this.options[event].apply(context, params);
        },
        
        /**Остальные методы плагина**/
        
	}
	
/**
 * jQuery plugin
 * @param {options} options
 **/
$.fn.multiInput = function(options){
    var options = jQuery.extend({
		//some default options
    }, options)
    return this.each(function() {
		//Для каждого найденного элемента создаем свой экземпляр плагина, передаем в него свой экземпляр настроек, и таким образом решаем проблемы "изоляции областей видимости переменных".
		//Кроме того, экземпляр плагина хранится непосредственно в DOM объекте, и 
		//добавив несколько дополнительных условий в данный конструктор можно реализовать функции get/set и вызов методов для каждого экземпляра прикрепленного к элементу
        $(this).data('multiinput',  new MultiInput(this, options));
    });
}

Если кому интересно я могу написать статью в котором выложу аккумулированные знания из разных статей из хабра по лучшим практикам в ООП, и по практикам создания плагинов и событий к ним (все это уже есть на хабре, но в разных статьях и с разными акцентами)

[jMas]

Обязательно пишите! Всем будет полезно.
С огрехами статьи согласен.

[boolive]

В jQuery UI что-то подобное делается для виджетов. Базовых методов добавите и получите свой jQuery UI