Category Archives: Programming

Расширение базового функционала 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, который в …

Логирование js-ошибок на сервере

Подсмотрел у разработчиков Yandex простое как пень логирование ошибок клиентской части на сервер:

function logError( Message, Url, Line )
{
	new Image().src = '/monitoring.php?msg=' + encodeUriComponent( Message ) + '&url=' + encodeUriComponent( Url ) + '&line=' + Line;
}

window.onerror = function ( Message, Url, Line ) {
	logError( Message, Url, Line );
};

try {
	// ...
}
catch ( e ) {
	logError( e );
}

function logError( Message, Url, Line )

{

new Image().src = '/monitoring.php?msg=' + encodeUriComponent( Message ) + '&url=' + encodeUriComponent( Url ) + '&line=' + Line;

}

window.onerror = function ( Message, Url, Line ) {

logError( Message, Url, Line );

};

try {

// ...

}

catch ( e ) {

logError( e );

}

Ещё ссылка про логирование ошибок через google analytics — http://blog.gospodarets.com/track_javascript_angularjs_and_jquery_errors_with_google_analytics/ (у меня несколько иная реализация, но идея примерно та же).

БЭМ — система модулей (виджетов) от Яндекс

Интересная реализация клиентских модулей, которая предполагает определённую файловую структуру для шаблонов, css, js и любых других нужных технологий. Естественно, повторное использование. Декларации для автоматической сборки модулей (css, js, шаблонов) написаны на javascript. Есть скрипты для автоматической сборки модулей в страницы. Пример построения сайта от разработчиков — http://video.yandex.ru/users/ya-events/view/302/?ncrnd=6362 Вот ещё видео — тут рассказывается про то, …

Баги в библиотеке memcached (getMulti)

Долго боролись с багом при использовании Memcached::getMulti в php 5.3.8. Как это было: Сначала данные складываются в кэш под некоторыми ключами, потом происходит считывание

	$cached = cache->getMulti( $cacheKeys );

	foreach ( $actions as &$action )
	{
		$actionCacheKey = self::getCacheKey( $action );

		if ( array_key_exists( $actionCacheKey, $cached ) ) {
			$action = $cached[$actionCacheKey];
		}
		else if ( in_array( $actionCacheKey, array_keys( $cached ) ) ) {
			die( '!!' );
		}
		else {
			$action = self::factory( $action );
		}
	}

$cached = cache->getMulti( $cacheKeys );

foreach ( $actions as &$action )

{

$actionCacheKey = self::getCacheKey( $action );

if ( array_key_exists( $actionCacheKey, $cached ) ) {

$action = $cached[$actionCacheKey];

}

else if ( in_array( $actionCacheKey, array_keys( $cached ) ) ) {

die( '!!' );

}

else {

$action = self::factory( $action );

}

Так вот, if ( array_key_exists( $actionCacheKey, $cached ) ) не отрабатывает никогда (равно как isset и ! empty). При этом условие else if ( in_array( $actionCacheKey, array_keys( $cached ) ) …

Chrome Developer Tools

Решил попробовать сменить браузер разработки с firefox на chrome. Почитал статью про возможности Chrome Developer Tools. Оказывается, там столько интересного есть :)

С чего начать изучение Ruby on Rails

http://net.tutsplus.com/tutorials/ruby/the-best-way-to-learn-ruby-on-rails/ — по шагам рассказывается, как подняться от уровня «никакой» до уровня «могу писать код самостоятельно».

Игры воображения с новыми API для JavaScript

Хороший доклад Гайдара Магданурова про новые возможности бразуеров (Application Cache, Web Workers, Web Sockets, File API, History API, Indexed DB). Ничего революционно нового он не поведал, просто вкратце перечислил и показал примеры. Мне понравилось. Видео — http://vimeo.com/34086427. Слайды — http://www.slideshare.net/gaidar/api-javascript. Дополнительные ссылки: https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

WebDav и Nginx

WebDav и Nginx — централизованное хранение файлов на удалённом сервере без тяжёлого софта на нём.

Firefox developer tools

Видео: Firefox developer tools Скачать новый Firefox (beta): http://blog.mozilla.com/futurereleases/2011/12/23/firefox-beta-with-new-developer-tools-and-enhanced-sync-is-ready-for-testing/

Дизассемблирование и минификация javascript

http://pimpmyjs.com/ — Uglify or Beautify your JavaScript, it’s your choice… (minify js online) На jquery.min.js выдал ошибку, но в общем работает, и причём быстро.