Расширение базового функционала jquery-ui-виджетов

Захотелось сделать более правильную работу с триггерением/навешиванием обработчиков на события, чем это реализовано в jquery-ui.
При этом сам функционал надоело копировать из виджета в виджет.
В общем, вот простой добавить методы к своим виджетам:

(function( $ )
{
	"use strict";
/**
 * расширение базового функционала jquery-ui
 */
	$.widget( "my.my_extension", {
		_triggerSmart: function( EventName, Data )
		{
			var me = this;
			var $me = $( me.element );

			$me.trigger( EventName + '.' + me.widgetName, Data );
			return me;
		},
		_bindSmart: function( EventName, Handler )
		{
			var me = this;
			var $me = $( me.element );

		// боремся с повторным навешиванием обработчика
			var events = $.data( $me.get( 0 ), 'events' );
			var filteredEvents = [];
			if ( EventName in events )
			{
				filteredEvents = $.grep( events[EventName], function( Event ) {
					return Event.type == EventName && Event.namespace == me.widgetName;
				} );
			}
			if ( ! filteredEvents.length ) {
				$me.bind( EventName + '.' + me.widgetName, Handler );
			}
			return me;
		}
	} );
}( jQuery ));

(function( $ )

{

"use strict";

/**

* расширение базового функционала jquery-ui

$.widget( "my.my_extension", {

_triggerSmart: function( EventName, Data )

{

var me = this;

var $me = $( me.element );

$me.trigger( EventName + '.' + me.widgetName, Data );

return me;

_bindSmart: function( EventName, Handler )

{

var me = this;

var $me = $( me.element );

// боремся с повторным навешиванием обработчика

var events = $.data( $me.get( 0 ), 'events' );

var filteredEvents = [];

if ( EventName in events )

{

filteredEvents = $.grep( events[EventName], function( Event ) {

return Event.type == EventName && Event.namespace == me.widgetName;

} );

}

if ( ! filteredEvents.length ) {

$me.bind( EventName + '.' + me.widgetName, Handler );

}

return me;

}

} );

}( jQuery ));

Потом для каждого виджета нужно будет указать опциональный второй параметр

$.widget( "my.fast_search", $.my.my_extension,
	{
		options:
		{
			...

$.widget( "my.fast_search", $.my.my_extension,

{

options:

{

...

Внимание нужно обратить на второй параметр $.my.my_extension, который в принципе предназначен для расширения функционала работающего виджета, но отлично работает и для того, чтобы унаследовать некие базовые методы в виджеты.

Сначала начал делать через

	$.extend( $.widget.prototype, {
		...
	} );

$.extend( $.widget.prototype, {

...

} );

но понял, что выигрыш в производительности будет слишком условным (из-за того, что при способе с прототипом методы копируются в память один раз, а не для каждого виджета), а простота реализованного способа — сильный профит.

Расширение базового функционала jquery-ui-виджетов

Similar Posts

LEAVE A COMMENT Отменить ответ