Dev.Front Js jQuery

jQuery Common Interactive Code style

var App = {
    init: function() {
        this.cacheElements();
        this.bindEvents();
        this.render();
    },
    cacheElements: function() {
        this.$el = $('#app');
        this.$main = this.$('.main');
        this.$footer = this.$('.footer');
    },
    $: function(selector) {
        return this.$el.find(selector);
    },
    bindEvents: function() {
      // event delegate
       this.$el.on('clik', '.xx', this.submit);

      // bind event to current element
       this.$main.on('click', this.toggle);
       ...
    },
    render: function() {
       this.$el.html(_.template());
       ...
    },
    toggle: function() {
       App.$main.toggleClass('hide');
    }
    ...
}
App.init();