Dev.Front Js jQuery

jQuery Common Interactive Code style

(function($) {
    var options;
    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', $.proxy(this.submit, this));
            this.$el.on('clik', '.js-get', $.proxy(this.getUsername, this));

            // bind event to current element
            this.$main.on('click', $.proxy(this.toggle, this));
            ...
        },
        render: function() {
            this.$el.html(_.template());
            ...
        },
        toggle: function() {
            this.$main.toggleClass('hide');
        },
        getUsername: function() {
             var self = this;
             $.getJSON('url').done(function() {
             });
        }
        ...
    };
    this.moduleIndex = function(opts) {
        options = opts || {};
        app.init();
    }
})(jQuery);