Question

I would like the below function to be more flexible and accept multiple callbacks to other functions if they are defined in the arguments.

$(function() {
    function icisDashBox(colorElem, thisWidth, thisHeight, completeCallBack) {
        $(colorElem).colorbox({
        transition: 'none',
        innerWidth: thisWidth,
        innerHeight: thisHeight,
        opacity: '0.5',
        onOpen: function() { 

        },
        onLoad: function() { 

        },
        onComplete:function() { 
            $('#cboxLoadedContent').wrap('<div id="icis_dialog_msg" />'); 

            completeCallBack();

        },
        onCleanup: function() { 

        },      
        onClosed: function() {
            $('#cboxLoadedContent').unwrap(); 
        }
    });
}

icisDashBox('.example9', '500', '500', completeFunction);

function completeFunction() {

    var fooClass = $("#colorbox").addClass("FOO");

    var barClass = $("#colorbox").addClass("BAR");

    var ajaxCnt = $.ajax({
        type: "GET",
        url: "http://www.payso.me.uk",
        dataType: "html",
        success: function(data) {
            $("#colorbox").addClass("AJAX SUCCESS");
        }
    });

    return {
        x : fooClass,
        y : barClass,
        z : ajaxCnt                         
    };
}

So in an ideal world my function would look like this without explicitly declaring any arguments:

function icisDashBox() { function code here }

Is this possible? Also if the arguments are not defined how do i handle that?

For example if one call to the function has several callbacks defined and another only has one is there a way of handling the lack of presence of callbacks.

Cheers,

🙂

Answer 1

You can use the keyword arguments which is an array of the passed arguments, like this:

function myFunc() {
   if(arguments.length > 0)     //be sure to check if there are any...
     var arg1 = arguments[0];
}

However, a much better approach is to accept an object, e.g.:

function myFunc(settings) {
   settings = settings || {};   //in case it was called as just: myfunc()
   var something = settings.something || "default value";
}

You’d call it like this:

myFunc({ something: "value", somethingElse: "otherValue" });

This approach allows you to accept any number of arguments as well, but also have any optional, without a bunch of myFunc(null, null, null, "value") type calls to provide only the parameter you want, plus they’re named making this much more maintainable IMO. Here’s an edited version of the plugin to demonstrate this.