Category Archives: javascript

Библиотеки для обработки javascript-ошибок

Позволяют делать обработку ошибок кроссбраузерно (поддержка старых версий браузеров). Дают нормальные стеки в различных ситуациях. stacktrace.js TraceKit Zone.js — не совсем для работы с ошибками, но и это умеет тоже. Говорят о них немного подробнее тут — http://youtu.be/4Tys-VuBPgo?t=24m24s

Сборник скринкастов по node.js на русском

от Ильи Кантора — http://learn.javascript.ru/nodejs-screencast. Я к этому товарищу отношусь без особого пиетета, да и с дикцией у него не так хорошо, но для начального уровня — вполне неплохо.

Оптимизация вывода длинного списка в браузере

Попросили оптимизировать вывод меню. Состоит оно из нескольких пунктов верхнего уровня, при нажатии на каждый открывается соответствующее подменю. В одном из подменю расположено более 30000(!) пунктов, и ожидается его дальнейшее увеличение.

Как не надо использовать promise

http://taoofcode.net/promise-anti-patterns/

AngularJS: особенности пробрасывания объектов в директиву

Есть у меня директива такого плана:

<div my-selector initial-value="{a: 1}"></div>

1	<div my-selector initial-value="{a: 1}"></div>

Хотелось бы отслеживать изменения в директиве. Вот так она выглядит:

directive('fbFieldObjectSelector', ['$rootScope', function ($rootScope)
{
	return {
		restrict: 'A',
		scope: {
			initialValue: '='
		},
		template: 'div',
		link: function link($scope, $el, attrs)
		{
			...

directive('fbFieldObjectSelector', ['$rootScope', function ($rootScope)

{

return {

restrict: 'A',

scope: {

initialValue: '='

template: 'div',

link: function link($scope, $el, attrs)

{

...

Самый простой способ:

$scope.$watch('initialValue', function (initialValue) {
	// @debug                                             
	console.log(initialValue);                            
	$scope.selectProduct(initialValue);                   
});

$scope.$watch('initialValue', function (initialValue) {

// @debug

console.log(initialValue);

$scope.selectProduct(initialValue);

});

он не работает, ошибка Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! Второй способ:

$scope.$watch('initialValue', function (initialValue) {
	// @debug                                             
	console.log(initialValue);                            
	$scope.selectProduct(initialValue);                   
}, true);

$scope.$watch('initialValue', function (initialValue) {

// @debug

console.log(initialValue);

$scope.selectProduct(initialValue);

}, true);

и третий способ:

$scope.$watchCollection('initialValue', function (initialValue) {
	// @debug
	console.log(initialValue);
	$scope.selectProduct(initialValue);
});

$scope.$watchCollection('initialValue', function (initialValue) {

// @debug

console.log(initialValue);

$scope.selectProduct(initialValue);

});

работают, но тоже выдают ошибку: Error: [$compile:nonassign] Expression ‘{a: 1}’ used with directive ‘fbFieldObjectSelector’ is …

Обработчик кастомных событий на чистом js

Часто попадается на собеседованиях, сам спрашиваю;) Давно видел эту ссылку, а тут почему-то найти не могу. Вот решение от Nicholas C. Zakas:

Node.js: конвертация buffer в строку

Делал proxy на Node.js. Некоторые типы ответов сервера мне нужно было парсить и подменять небольшие кусочки. Создаю всё функцией

function makeProxy(req, res, cb)
{
	delete req.headers.host;
	delete req.headers['accept-encoding']; // to prevent gzipping data on api server
	var options = {
			hostname: apiHost,
			port: 80,
			path: req.url,
			method: req.method,
			headers: req.headers
		},
		proxy = http.request(options, cb || noop);

	proxy.on('response', function (proxyResponse) {
		fixCookies(proxyResponse.headers, apiHost);
		res.writeHead(proxyResponse.statusCode, proxyResponse.headers);
	});

	return proxy;
}

function makeProxy(req, res, cb)

{

delete req.headers.host;

delete req.headers['accept-encoding']; // to prevent gzipping data on api server

var options = {

hostname: apiHost,

port: 80,

path: req.url,

method: req.method,

headers: req.headers

proxy = http.request(options, cb || noop);

proxy.on('response', function (proxyResponse) {

fixCookies(proxyResponse.headers, apiHost);

res.writeHead(proxyResponse.statusCode, proxyResponse.headers);

});

return proxy;

}

Но тело ответа всегда приходит буфером. Много всякого читал, как вместо буферов принимать строки, пытался через промежуточный поток типа transform всё сделать (http://nodejs.org/api/stream.html#stream_class_stream_transform_1), но ничего не получалось. А потом случайно наткнулся на пост http://stackoverflow.com/questions/12121775/convert-buffer-to-utf8-string#comment31200460_12122668. Достаточно …

Почему нельзя полагаться на тег script

Зашёл тут разговор про то, почему jQuery делает eval всего кода внутри всех тегов script. Связано это с тем, что при повторном исполнении скриптов они могут содержать ссылки на старые DOM-элементы, и поэтому могут отрабатывать некорректно. Ну и сложно управлять последовательностью повторного исполнения скриптов. http://stackoverflow.com/questions/3348739/force-re-eval-inline-and-included-javascript

Вопросники для тестов по javascript

http://madebyknight.com/javascript-scope/ http://javascript.ru/test http://asenbozhilov.com/articles/quiz.html http://www.nczonline.net/blog/2010/02/16/my-javascript-quiz/ http://perfectionkills.com/javascript-quiz/ http://dmitry.baranovskiy.com/post/91403200 http://dmitrysoshnikov.com/ecmascript/the-quiz/ http://james.padolsey.com/javascript/another-javascript-quiz/ http://www.techrepublic.com/blog/software-engineer/javascript-interview-questions-and-answers/

Директивы для обработки DOM-событий в AngularJS

Всё достаточно просто, много раз использовал, но надо бы и здесь выложить. Допустим, нам нужно вешать AngularJS-обработчики на DOM-события mouseenter и mouseleave. Для этого пишем генератор директив по массиву:

var directives = angular.module('CommonDirectives', []);

angular.forEach(['Mouseenter', 'Mouseleave'], function (eName) {
	var aName = 'mm' + eName,
		eName = eName.toLowerCase();
	directives.
		directive(aName, ['$parse', function($parse) {
			return {
				restrict: 'A',
				link: function link($scope, $element, attrs) {
					var fn = $parse(attrs[aName]);
					$element.bind(eName, function ($event) {
						$scope.$apply(function () {
							fn($scope, {$event: $event});
						});
					});
				}
			};
		}]);
});

var directives = angular.module('CommonDirectives', []);

angular.forEach(['Mouseenter', 'Mouseleave'], function (eName) {

var aName = 'mm' + eName,

eName = eName.toLowerCase();

directives.

directive(aName, ['$parse', function($parse) {

return {

restrict: 'A',

link: function link($scope, $element, attrs) {

var fn = $parse(attrs[aName]);

$element.bind(eName, function ($event) {

$scope.$apply(function () {

fn($scope, {$event: $event});

});

}

};

}]);

});

Ну и можно добавлять названий дректив по вкусу. Использование:

<li
	ng-repeat="gift in selectedGroup.gifts"
	ng-class="{'selected': gift.id == selectedGift.id, 'hovered': gift.id == hoveredGift.id}"
	ng-click="selectGift(gift)"
	mm-mouseenter="hoveredGift = gift)"
	mm-mouseleave="hoveredGift = undefined"
>
	<div class="gift-container">
		<b class="{{gift.key}}"></b>
	</div>
</li>

<li

ng-repeat="gift in selectedGroup.gifts"

ng-class="{'selected': gift.id == selectedGift.id, 'hovered': gift.id == hoveredGift.id}"

ng-click="selectGift(gift)"

mm-mouseenter="hoveredGift = gift)"

mm-mouseleave="hoveredGift = undefined"

</div>

</li>

Результат — http://grab.by/tXHy. Таким же образом можно делать директивы для любых событий: focus, blur, keypress …