I'm trying to refactor some code I wrote months ago when I used to use lots of anonymous functions. The way I'm trying to do it now is by taking all those functions and rewrite them within Object Literal Pattern.
I'm new to this kind of pattern and I would like to know if I'm doing it right, what should I improve or if there's a better way to write the code for easier maintainability.
The first piece of code I refactored is in the following rows and is about an accordion view.
I've also created a JsFiddleJsFiddle for this where you can see the whole code including the former way of writing the js.
var mainAccordion = {
init: function() {
this.cacheDom();
this.bindEvents();
},
cacheDom: function() {
this.$elTrigger = $('.js-accordion-trigger');
},
bindEvents: function() {
this.$elTrigger.on('click', this.elExpand);
},
elExpand: function(event) {
var $el = $(this),
$elContent = $el.next('.accordion__content'),
$elParent = $el.closest('li'),
$elSiblings = $el.parent().siblings(),
$groupSiblings = $el.parents('.list-with-header').siblings();
if (!$elParent.hasClass('is-expanded')) {
event.preventDefault();
$elContent.show();
$elParent.addClass('is-expanded');
$elSiblings.removeClass('is-expanded');
$elSiblings.find('.accordion__content').hide();
if ($groupSiblings.find('li').hasClass('is-expanded')) {
$groupSiblings.find('li').removeClass('is-expanded');
$groupSiblings.find('.accordion__content').hide();
}
// animate accordion element to top of page
$('html, body').stop().animate({
'scrollTop': $elParent.offset().top
});
} else {
event.preventDefault();
$elContent.slideUp('fast');
$elParent.removeClass('is-expanded');
}
}
};
mainAccordion.init();