Частый посетитель
Покинул форум
Сообщений всего: 882
Дата рег-ции: Март 2010
Помог: 1 раз(а)
|
например, я создал виджет product с использованием jQuery фабрики виджетов.
в объекте-реализации виджета есть следующий метод, который вызывается сразу после установки виджета на диве:
CODE ( javascript):
скопировать код в буфер обмена
{ findElement : function() { this.name = this.find('.product--name'); this.cost = this.find('.product--cost'); } }
То есть находим элемент с классом product--name внутри виджета и сохраняем в нашем объекте.
вот верстка сего виджета:
на странице 3 продукта
CODE ( html):
скопировать код в буфер обмена
<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>
вызываю инициализацию виджета
теперь возникла задача: по клику на <div class="product--name"> product--cost должен закрыться.
вот методы, которые это делают:
CODE ( javascript):
скопировать код в буфер обмена
{ onNameClick : function() { this.name.on('click', this.handleNameClick); }, handleNameClick : function(event) { this.product--cost.css({display : 'none'}); } }
Естественно product--cost не скроется т.к. устанавливая обработчик клика handleNameClick, он вызывается не как метод объекта, а как обычная ф-ция.
Можно, кончно, было реализовать это так:
CODE ( javascript):
скопировать код в буфер обмена
{ 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')
Конечно, можно ещё сделать вот так:
CODE ( javascript):
скопировать код в буфер обмена
{ 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 экземпляров
одной и той же ф-ции.
В общем я потратил уже не одну неделю, размышляя как же сделать правильно и максимально удобно, но не смог найти решения, которое бы устроило меня.
Может в фабрике уже давно есть решение данного момента, а я и не знаю о нем? Либо, пожалуйста, может у вас есть идеи на сей счет? Заранее благодарю.
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Без описания
