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', 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');
        }
        ...
    }
    this.moduleIndex = function(opts) {
        options = opts || {};
        app.init();
    }
})(jQuery);