Записи с тегом «JavaScript»

Более двух лет назад был написан сниппет «Паттерны организации кода на чистом JavaScript, JQuery и Prototype». За это время многое изменилось, сегодня выкладываю обновление в виде памятки по самым популярным способам создания reusable component'ов отсортированных от простого к сложному (в случае, если не нашел устоявшегося названия — пришлось придумать своё):

Чистый JavaScript без фреймворков

• Object Literal
• function constructor + object prototype (пример «Чистый JavaScript без использования фреймворков» в старом посте)
• Javascript Module Pattern
• Resig's Simple Inheritance (по результирующему синтаксису очень похож на подход Prototype)

jQuery

• «Минимальный» плагин (пример «jQuery» в старом посте)
• «Сбалансированный» плагин (мой пример в сниппете Шаблон jQuery-плагина, как оказалось, очень похож на jQuery Boilerplate)
• «Плагин с использование паттерна Bridge»
• jQuery UI widget factory (развитие подхода из предыдущего пункта)

Отслеживать один сайт в нескольких аккаунтах Google Analytics довольно просто, достаточно немного изменить стандартный код отслеживания:

<script type="text/javascript">
	var _gaq = _gaq || [];

	_gaq.push(['_setAccount', 'UA-XXXXXX-X']); // Идентификатор веб-ресурса с первого аккаунта
	_gaq.push(['_trackPageview']);	
	_gaq.push(['_setAccount', 'UA-XXXXXX-X']);	// Идентификатор веб-ресурса со второго аккаунта
	_gaq.push(['_trackPageview']);

	// Стандартный код загрузки
	(function() {
		var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
		ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
		var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
</script>

При отслеживании одновременно в двух аккаунтах, осуществляется два отдельных запроса на сервера Google Analytics.

Регистрация и отслеживание AJAX-запросов в Google Analytics

Google-Analytics jQuery JavaScript AJAX

В API Google Analytics есть возможность программно регистрировать посещение страницы с помощью метода _trackPageview, это удобно использовать для отслеживания AJAX-запросов. Для упрощения использования этой функциональности в проектах, где есть jQuery был написан миниатюрный плагин:

(function ($) {
	$.extend({
		ga: {
			trackAjax: function (url) {
				if (window._gaq) {
					_gaq.push(['_trackPageview', '/ajax-handlers' + url]);
				}
			}
		}
	});
})(jQuery);

Пример использования:

var ajaxUrl = '/get-some-data-via-ajax/';

$.ajax({
	type: 'POST',
	url: ajaxUrl
	data: params,
	dataType: 'json',
	success: function (data) {			

		...

		$.ga.trackAjax(ajaxUrl);
	}
});

Важно помнить, что при каждом вызове функции _trackPageview делается дополнительный HTTP-запрос на сервера Google Analytics.

Обновление от 09.11.2011: Благодаря комментариям оптимизирован код шаблона.

Решил собрать полный шаблон jQuery-плагина, который используем чаще всего. Решение имеет следующие особенности:

• Есть настройки по умолчанию
• Хранилище настроек и переменных в виде специального объекта
• Поддержка method chaining
• Поддержка public-методов

Шаблон легко дополняется:

• callback'ами
• custom event'ами

код шаблона...

Интервалы, которые определены в секундах (например, длительность видео- или аудио-ролика) удобно представлять в формате 00:00:00 (часы:минуты:секунды) для лучшей читабельности.

читать дальше

Официальный код кнопки +1 на момент написание записи выглядит так:

<!-- Разместите этот тег в теге head или непосредственно перед закрывающим тегом body -->
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'ru'}
</script>

<!-- Разместите этот тег в том месте, где должна отображаться кнопка +1 -->
<g:plusone></g:plusone>

Асинхронный вариант, который не блокирует загрузку страницы получается довольно просто:

<!-- Разместите этот тег в том месте, где должна отображаться кнопка +1 -->
<g:plusone></g:plusone>

...

<!-- В этот блок будет добавлен тег <script /> --->
<div id="gp-root" style="display:none"></div>

...

<script type="text/javascript">
	window.___gcfg = {lang: 'ru'};
	(function() {
		var el = document.createElement("script");
		el.type = "text/javascript";
		el.src = "https://apis.google.com/js/plusone.js";
		el.async = true;
		document.getElementById("gp-root").appendChild(el);
	}()); 	
</script>

Несколько полезных функций (написанных не мной) для работы с числами с плавающей запятой в виде jQuery-плагина.

смотреть код...

Быстрое решение (оригинал) для позиционирования одного блока на другим, упрощённый аналог Position из jQuery UI.

читать дальше...

Для одного из проектов понадобилось генерировать локальный html-файл с небольшим кодом на JavaScript внутри. По умолчанию при открытии такого документа с локального диска в Internet Explorer 6/7/8 появится предупреждение системы безопасности «В целях безопасности Internet Explorer не разрешает этому веб-узлу выполнение скриптов или элементов управления ActiveX, которые могут получить доступ к компьютеру» и код выполнен не будет:

<!DOCTYPE html>
<html>
	<head>
		<title>IE JavaScript test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
		<script type="text/javascript">
			alert('Hello, world');
		</script>
	</body>
</html>

что же нужно сделать?..

Поисковые подсказки (такие, как например, на Yandex'е)), которые будут работать как прямые ссылки при отключенном JavaScript и будут подставлять поисковую фразу в поле ввода, если скрипты работают, можно реализовать с помощью небольшого jQuery плагина.

код плагина и пример использования...