возник ещё один вопрос по фабрике, подскажите, пожалуйста.
например, я создал виджет 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 экземпляров
одной и той же ф-ции.
В общем я потратил уже не одну неделю, размышляя как же сделать правильно и максимально удобно, но не смог найти решения, которое бы устроило меня.
Может в фабрике уже давно есть решение данного момента, а я и не знаю о нем? Либо, пожалуйста, может у вас есть идеи на сей счет? Заранее благодарю.
