CRUD app for managing customers

Question

I am practicing using the Prototype pattern and to do so, I am building a simple CRUD app that allows me to view, add, and delete customers.

Here is a JsFiddle for you to see what I've got so far.

// Create customer 'class' and store state here
var Customer = function(el) {
    this.el = document.getElementById(el);    
    this.first_name = $("#input_first_name").val();
    this.last_name = $("#input_last_name").val();
    this.name = ""

}

var customers = [];

// In the Customer prototype store methods
Customer.prototype = {

    // utility to log customer array
    logCustomers: function() {
        console.log(customers);
    },

    fullName: function() {
        this.name = this.first_name + " " + this.last_name;
        return this.name;

    },

    addCustomer: function() {
        // clear out the current html to make room for the append later
        this.el.innerHTML = "";

        // create new customer instance
        var cust = new Customer();

        // add customer to the array
        customers.push(cust);

        // iterate through the array and add each customer to a row in the table
        $.each(customers, function() {
            $("#el").append("<tr><td>" + this.fullName() + "</td><td><a id='btn_remove_cust'  class='btn btn-mini btn-danger'>delete</a></td></tr>");
        })

        // Clear out the text boxes
        $("#input_first_name").val("");
        $("#input_last_name").val("");

    },

    // Remove customer from array and hide the row that contained them
    removeCustomer: function(e) {        
        $(e.target).closest('tr').hide();
        customers.splice(e.target, 1);

    }
}


// Default customer object has to be created in order for unobtrusive calls to work
var cust = new Customer("el");



// unobtrusive jQuery event handling below
$("#btn_add_customer").click(function() {
    cust.addCustomer();
});

$("#btn_remove_cust").live("click", cust.removeCustomer);

$("#btn_log_customers_array").click(cust.logCustomers)

There are a few things that I'm concerned about:

1. I'm using jQuery to handle events and I'm trying to make everything as unobtrusive as possible. In doing so, I wasn't exactly sure where I needed to place the event-handling code so I created a separate block below the prototype code to contain the button click events. I'm not sure if this is the best way to go.

2. The events are being passed a function from the prototype - so in order for anything to work I have to new-up an instance of the 'Customer' before the user actually creates a new customer. Seems like there might be a better way - but since I'm using a constructor function, I'm not sure if there is any other way around that. If I change the constructor to an object literal, than I've just got a singleton.

3. Am I handling the removal of 'customers' from the array properly? I created a simple utility function that is wired up to a button so that I could check and make sure that objects were being removed - as well as hidden in the DOM.

Answer 1

Here's are a few things that I noticed.

1

The control and flow of the application needs to be seperated into smaller logical groups. The customers should be a container and controller for the customers, not the otherway around. For example, Customer.prototype.addCustomer should be associated with Customers.prototype.addCustomer, since Customers is a container for customer objects.

2

this.id should be a property inside the Customer constructor. Ideally, the id value should be set to null until it is added to the Customers container.

3

Setting an object's prototype to an object over-writes the entire prototype, which means that you lose the reference to the constructor object. So it's better if you add values and functions to the prototype one at a time like so.

// ok but you lost a few values.
Customer.prototype = {
    method1: function(){
        //...
    }
};

//best
Customer.prototype.method1 = function(){
    //...
};

4

Pass values to the constructor rather than have the constructor go out and find them.

// ok
var Customer = function(el) {
    this.el = document.getElementById(el);    
    this.first_name = $("#input_first_name").val();
    this.last_name = $("#input_last_name").val();
    this.name = ""
}

// best
var Customer = function(el, firstName, lastName ) {
    this.el = document.getElementById(el);    
    this.first_name = firstName;
    this.last_name = lastName;
    this.name = "";
       this.id;
}   

Here's a free online book to help you to understand MVC http://addyosmani.github.com/backbone-fundamentals/