Category Archives: javascript

Как переписать jQuery на native JavaScript

Интересная статья про то, как выглядят аналоги распространённых jQuery-вызовов в современных браузерах (с использованием querySelector и classList).

JavaScript-паттерны

http://shichuan.github.com/javascript-patterns/

Документация по Ember.js

Появилась более-менее внятная документация по Ember — http://emberjs.com/.

Ajax Layout

Доклад Олега Илларионова про архитектуру клиентской части vk.com (vkontakte). Олег Илларионов: Разработчик ВКонтакте, ответственный за API, разделы Видеозаписей, Друзей, Приложений, интеграцию с внешними сервисами Twitter, Email и другие. Студент ЛЭТИ. http://www.slideshare.net/profyclub_ru/ajax-layout

Debug javascript в PhpStorm

Почему-то у меня до сих пор здесь нет этого поста, хотя первый раз пользовался года полтора назад. В PhpStorm можно настроить режим отладки javascript, причём и страниц, находящихся на удалённой машине. http://www.jetbrains.com/editors/javascript_editor.jsp?ide=phpstorm#Debugger_for_JavaScript http://wiki.jetbrains.net/intellij/Remote_JavaScript_debugging_with_WebStorm_and_PHPStorm

Алгоритм динамического центрирования меню по нужному элементу

Задача — при возникновении события подсветить нужный пункт меню, показать по 3 пункта сверху и снизу, остальные скрыть. Это относится и к пагинация (paging). Если, к примеру, это второй пункт меню, то снизу показать больше. В общем, чтобы в сумме всегда было показано 7 пунктов. Решил показать алгоритм, которым воспользовался, чтобы всегда быть уверенным, что …

Кроссдоменные запросы из javascript

Недавно из неожиданного источника поступил вопрос «что такое document.domain«. Я об этом читал давно, толком никогда не использовал, потому решил сохранить на будущее закладочку:) . Вот описание способов кроссдоменной работы javascript: Старый, ограниченный, но кроссбраузерный — поиграться с document.domain http://javascript.ru/ajax/cross-domain-scripting#kross-domennyy-skripting-s-obshchim-naddomenom Более новый, удобный, но поддержка всеми под вопросом — document.getElementById(«iframe»).contentWindow.postMessage() из спецификации HTML5: http://javascript.ru/ajax/cross-origin-2

jQuery-плагин для создания timeline

http://timeline.verite.co/ Получается примерно вот что:

Расширение базового функционала 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/ (у меня несколько иная реализация, но идея примерно та же).