Function parameters have always been a weak point in JavaScript because of the very lenient way of handling them by most JavaScript interpreters. A solution is to use an object literal to handle them. Since jQuery provides the $.extend utility function, why don't we use the same approach used in plugin development to handle function parameters? This is a neat way to extend a function. For example:
function addContent(params) {
params = $.extend({
element: null,
content: ''
}, params);
var origContent = params.element.html();
return params.element.html(origContent + params.content);
}
This function is similar to the function used to create a plugin, but with a major advantage: it doesn't pollute the global jQuery namespace and can be actually applied to a wide variety of elements. Example:
$(document).ready(function() {
$('#test li ').each(function() {
var $li = $(this);
addContent({element: $li, content: '<p>Test</p>'});
});
});
Further, in this way we can also handle events in a more concise way by attaching a function to an event handler without using an anonymous function. You can see the demo below.