Показать сообщение отдельно
  #5 (permalink)  
Старый 22.01.2014, 17:14
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

возник ещё один вопрос по фабрике, подскажите, пожалуйста.
например, я создал виджет product с использованием фабрики виджетов.

в объекте-реализации виджета есть следующий метод, который вызывается сразу после установки виджета на диве:
{
	findElement : function()
	{
		this.name = this.find('.product--name');
		this.cost = this.find('.product--cost');
	}
}


То есть находим элемент с классом product--name внутри виджета и сохраняем в нашем объекте.

вот верстка сего виджета:
<div class="product">
	<div class="product--name">
		
	</div>
</div>


на странице 3 продукта

<div class="product">
	<div class="product--name">
		
	</div>
	<div class="product--cost">
		
	</div>
</div>
<div class="product">
	<div class="product--name">
		
	</div>
	<div class="product--cost">
		
	</div>
</div>
<div class="product">
	<div class="product--name">
		
	</div>
	<div class="product--cost">
		
	</div>
</div>


вызываю инициализацию виджета
$('.product').product();


теперь возникла задача: по клику на <div class="product--name"> product--cost должен закрыться.
вот методы, которые это делают:
{
	onNameClick : function()
	{
		this.name.on('click', this.handleNameClick);
	},
	
	handleNameClick : function(event)
	{
		this.product--cost.css({display : 'none'});
	}
}


Естественно product--cost не скроется т.к. устанавливая обработчик клика handleNameClick, он вызывается не как метод объекта, а как обычная ф-ция.

Можно, кончно, было реализовать это так:

{
	onNameClick : function()
	{
		this.name.on('click', this.handleNameClick);
	},
	
	handleNameClick : function(event)
	{
		$(event.currentTarget).parents('.product').find('.product--cost').css({display : 'none'});
	}
}


это будет работать, но вся моя идея заключается в том, что внутри метода findElement я хочу находить все элементы виджета и сохранять ссылки на эти элементы внутри экземпляра виджета, то есть в объекте.
я хочу один раз потратить время, найдя все элементы виджета(product--name, product--cost), а затем манипулировать этими элементами, не тратя времени на их поиск, как я делаю вот в этом куске кода:
$(event.currentTarget).parents('.product').find('. product--cost')

Конечно, можно ещё сделать вот так:
{
	onNameClick : function()
	{
		var copyOfThis = this;
		
		function handleNameClick(event)
		{
			copyOfThis.handleNameClick(event);
		}
		
		this.name.on('click', handleNameClick);
	},
	
	handleNameClick : function(event)
	{
		this.cost.css({display : 'none'});
	}
}


Замыкание, здорово, работает. Но есть одно неприятное для меня НО. При таком подходе, если будет, например, 1000 продуктов на странице, то ф-ция handleNameClick внутри метода onNameClick будет создана 1000 раз, то есть в памяти будет 1000 экземпляров
одной и той же ф-ции.

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