Change functions based on jQuery plugin {options} I'm developing my first legitimate jQuery plugin, and I'm trying to keep it very modular. To do this, I'm writing many individual functions, which is fine, but I need a clean way to determine what functions to fire based on the plugin options provided by the user.

Right now, I'm using a .on('click',...) event with a switch statement. That method is ok and I just have a feeling that there is a better, time-tested method of changing what function is fired based on plugin {options}. A better method that is used by professional JavaScript developers and has been proven to work reliably.

Again, I'm trying to be as modular and professional as possible, but I'm self taught, so there's really no one to say if I'm doing it the "right" way, or the "best" way for future maintainability.

JSFiddle

(function($){

$.fn.showDateTime = function(options) {

    // variables and settings
    var d;
    var $button = $(this);
    var defaults = {
        date: "all"
    };
    var settings = $.extend({}, defaults, options);

    // event handlers
    $button.on('click', function(){
        d = new Date();
        switch(settings.date){
            case "all": showDate(); 
                        break;
            case "date only": showDateOnly(); 
                              break;
            case "time only": showTimeOnly(); 
                              break;
            default: showDate();
        }
    });

    // functions
    function showDate(){
        alert(d.toString());
    }
    function showDateOnly(){
        alert(d.toDateString());
    }
    function showTimeOnly(){
        alert(d.toLocaleTimeString());
    }
};
})(jQuery);

$('#button').showDateTime({date:"date only"});
In my opinion it's a good idea to get rid of the switch case by using better naming for the inputs and by changing the structure of your functions to Object based functions, i.e. if you change your functions to this:

var showDate={
    all:function (){
        alert(d.toString());
    },
    date:function showDateOnly(){
        alert(d.toDateString());
    },
    time:function (){
        alert(d.toLocaleTimeString());
    }
};


and the setting options you get are ['all' , 'date' , 'time']

then you can call these functions like this:

(showDate[settings.date]) ? showDate[settings.date]() : showDate.all();


and get rid of the switch case. DEMO