Добрый день.
Возникла необходимость структурировать обработчики. Хотелось бы услышать мнения бывалых JS-программистов.
Разбил на странице все логические блоки на вот такие обьекты.
Собственно код:
data.character = {
$name: $('input[name="name"]', '#char-create'),
$photo: $('input[name="avatar"]', '#char-create'),
$img: $('div.avatar', '#char-create')
.on('update', function(event, i){
this.character.$photo.val(i);
g = this.character.$gender.prop('checked');
$(event.currentTarget).css('background-position', (i-1)*-185+'px '+((g)?0:-230)+'px');
}.bind(data)),
$gender: $('input[name="gender"]', '#char-create')
.on('change', function(event){
$('#gender-choise label').removeClass();
$(event.currentTarget).parent().addClass('active');
this.character.$img.trigger('update', 1);
}.bind(data)),
$next: $('div.change-avatar button.next', '#char-create')
.on('click', function() {
var i = + this.character.$photo.val();
i = (i < 12)? i+1 : 1;
this.character.$img.trigger('update', i);
}.bind(data)),
$prev: $('div.change-avatar button.prev', '#char-create')
.on('click', function() {
var i = + this.character.$photo.val();
i = (i > 1)? i-1 : 12;
this.character.$img.trigger('update', i);
}.bind(data)),
...
}
Интересует следующее:
1) Имеет ли право на жизнь?
2) Как сделать лучше?
3) Не получается вешать bind на data.character, толи обьект не успевает создатся толи я не до конца понимаю механику работы
4) Как вы пишете код в больших проектах с множеством обработчиков, который потом нужно будет длительное время поддерживать и расширять?
Заранее спасибо.
upd: п.3 вопрос решен, на момент объявления функции объект еще создается