Sample Modular JS Pattern

index.js

(function() {
    var customer = {
        customer: [],
        filter: '',
        init: function() {
            this.cacheDOM();
            this.bindEvents();
            this.render();
        },
        cacheDOM: function() {
            this.$el = $('#customerModule');
            this.$input = this.$el.find('input');
            this.$search = this.$el.find('button#search-button');
            this.$button = this.$el.find('button#print');
            this.$ul = this.$el.find('ul');
            this.template = this.$el.find('#customer-template').html();
        },
        bindEvents: function() {
            this.$button.on('click', this.printData.bind(this));
            this.$input.bind('change', this.searchData.bind(this));
        },
        render: function() {
            var filter = this.filter;
            var customer = filter.length === 0
                ? this.customer
                : this.customer
                  .filter(function(customer) {
                      return customer.Name.includes(filter);
                  });
                  
            this.$ul.html(Mustache.render(this.template, {
                customer: customer
            }));
        },
        printData: function() {
            $.getJSON('js/customer.json', function(response) {
                $.each(response, function(i, customer) {
                    this.customer.push(customer);
                }.bind(this));
                this.render();
            }.bind(this));
        },
        searchData: function(evt) {
            this.filter = evt.target.value;
            this.render();
        }

    }
    customer.init();
})()