This Gist shows a VERY simple separation of concerns for the types of activities commonly done to a page Including: -- Get data -- Write stuff out to the DOM -- Handle errors -- Perform decision logic This code is 100% unit testable

JavaScript MVC

var CustomersController = function (dependencies) {
    var self = this;
    var customerRepository = dependencies.customerRepository;
    var errorHandler = dependencies.errorHandler;
    var customersView = dependencies.customersView;

    var init = function() {
        //Set up handler for 'loadCustomer' event
        $(dependencies.document).on('loadCustomer', function (evt, id) {
            self.loadCustomerById(id);
        });
    }

    self.loadCustomers = function () {
        customerRepository.getCustomers().then(customersView.showCustomers, errorHandler.handleApiError);
    }

    self.loadCustomerById = function (id) {
        customerRepository.getCustomerById(id).then(customersView.showCustomer, errorHandler.handleApiError);
    }

    init();
};

var CustomersView = function (listElementId) {
    var self = this;

    self.listElement = listElementId;

    function formatItem(item) {
        return item.Forename + ' ' + item.Surname;
    }

    self.showCustomers = function (data) {
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            var elem = $('<li>', { text: formatItem(item) });
            //Set up 'loadCustomer' event when item is clicked
            elem.on('click', { id: item.Id }, function (event) {
                $(document).trigger('loadCustomer', [event.data.id]);
            });
            elem.appendTo(self.listElement);
        };
    };

    self.showCustomer = function (data) {
        //Stand back and admire my cutting edge UI here. Alert boxes are so 2014
        alert(data.Forename + ' ' + data.Surname);
    };
};

var CustomerRepository = function (dataContext) {
    var self = this;

    self.getCustomers = function () {
        return dataContext.fetch('/api/customers');
    };

    self.getCustomerById = function (id) {
        return dataContext.fetch('/api/customers/' + id);
    };
};

var DataClient = window.DataClient = function () {
    var self = this;

    var reply = function (r) {
        return r;
    };

    self.fetch = function (url) {
        return $.get(url).then(reply)
    };
};

var ErrorHandler = window.ErrorHandler = function () {
    var self = this;

    self.handleApiError = function (details) {
        //Do something real here rather than log
        console.log(details.url + ' failed with status: ' + details.status);
    };
};

//Self executing function to new up the infrastructure required on a page

(function ($) {
    var CustomerPage = window.CustomerPage = function () {
        var dataClient = new DataClient();
        var customersController = new CustomersController({
            errorHandler: new ErrorHandler(),
            customerRepository: new CustomerRepository(dataClient),
            customersView: new CustomersView($('#customerList')),
            document : document
        });
        customersController.loadCustomers();
    };
})($);