jQuery: writing plugin options

jQuery's plugins would not be so powerful without the options they provide for customizing the default actions of the plugins themselves. There are several things that actually need to be said about plugin options. I'll summarize them below.

Objects vs parameters

In their essential form, plugins are functions attached to every single element in the jQuery's chain. In JavaScript, functions can accept parameters. For example:

function sum(a, b) {
  return a + b;
}

This function takes two arguments and sums them. Very simple. The problem with this approach is that JavaScript is really loose in the core handling of parameters. For example, if you change the order of the parameters, the function will always work, but with unexpected results. Another thing that is to be said is the problem of missing parameters. For that reason, most developers provide default parameters to their functions, like so:

function sum(a, b) {
  a = a || 1;
  b = b || 1;
  return a + b;
}

Unlike PHP, where default parameters can be passed along with the function's declaration, JavaScript uses the OR operator for that purpose. It simply informs the interpreter that if a parameter is specified, then use that parameter, otherwise use the value provided on the right of the OR operator. In that case if both parameters are not specified, then the function will return 2.

As said earlier, problems arise when a parameter not only is missing, but also when it's in the wrong place. To avoid any possible confusion, many developers use objects to pass parameter to a function. In a jQuery's plugin context, a typical example would be the following:

$.fn.ajaxLink = function(options) {
    options.type = options.type || 'GET';
    options.url =  options.url || 'ajax.php';
   options.data = options.data || this.attr('href');
  options.callback = options.callback || function() {};

  this.click(function(e) {

    $.ajax({
        type: options.type,
        url: options.url,
        data: options.data,
        success: options.callback
    });

    e.preventDefault();

  });
};

We've basically created a plugin that performs an Ajax request on each a element. Since we've used an object to store our options, the order in which the arguments are passed to the $.ajax() method is preserved. So we can write:

$('#test').ajaxLink({
    url: 'process.php',
   data: 'foo=baz',
  callback: function(response) {
    alert(response);
  }
});

Even if a parameter is missing, we've stored the correct order in our object, so it's safe to omit one value.

Choosing default parameters

Default parameters should be carefully chosen. A good default parameter is a parameter that doesn't affect the overall functioning of our plugin. Further, it should not cause any undesired side effect, such as raising JavaScript errors. You should always test many possible case-scenarios in order to make sure that your plugin won't affect other components or the usability of a web page.