$ .extend () with functions

Question

I am writing a jQuery plugin that needs callback functions that are executed, for example, when an option is selected from the <select> to which the plugin is applied.

I saw plugins that allow you to define functions in the parameters you pass, for example:

 $('div.foo').pluginBar({ option1: 'red', someEvent: function() { // Do stuff } }); 

I want to be able to define the default function someEvent in my plugin code, but if the user defines this function in the parameters that they pass, it should overwrite the default function. Is this possible with $.extend() , or am I looking the wrong way?

I looked at the plugin development tutorial , but I don’t think it covers extending the behavior of default functions anywhere, I read the information about using the init: function, but I would just like to define the function (inside the plugin namespace) and change it from using the parameters passed to the plugin.

Answer 1

Here is an example:

 (function( $ ) { $.fn.pluginBar = function(options) { var settings = $.extend( { someEvent: function() { alert('default'); } }, options); return this.each(function() { settings.someEvent(); }); }; })( jQuery ); $('div.foo').pluginBar({ option1: 'red', someEvent: function() { alert('custom'); } }); 

If you do not specify someEvent when connecting the plugin, the default value will be used.

Answer 2

In javascript, functions are first-class objects. So you can use functions like any other variable:

 //making an anonymous function, and assigning it to a variable var meep = function () { return 'meep'; }; //passing a function as a parameter [ 'moop' ].map( meep ); //['meep'] //assigning it in an object literal var weirdNoises = { 'meep' : meep, 'slarg' : function () { return 'slarg'; } }; weirdNoises.meep(); //'meep' weirdNoises.slarg(); //'slarg' //you can also return functions function meeper () { return meep; } function slarger () { return function () { return 'slarg'; }; } //meeper returns a function, so the second () means "execute the function // that was returned" meeper()(); //'meep' slarger()(); //'slarg' 

As you can see, functions are like any other values. That way, you can define a default parameter, which will be a function, and override it, like everything else.

 $.fn.weirdNoise = function ( options ) { var defaults = { makeNoise : function () { return 'Rabadabadaba'; }, isSilly : true }; return $.extend( defaults, options ); }; var raba = $( 'foobar' ).weirdNoise().makeNoise(); raba.makeNoise(); //'Rabadabadaba' raba.isSilly; //true var shaba = $( 'foobar' ).wierdNoise({ makeNoise : function () { return 'Shabadabadoo'; } }); shaba.makeNoise(); //'Shabadabadoo' shaba.isSilly; //true 

A contrived example, but I think this illustrates the point.

Answer 3

Yes, you can extend objects that have function values.

 var originalFunction = function() { alert( 'original' ); } var a = { foo: 'bar', func: originalFunction }; var b = { foo: 'baz', func: function() { alert( 'ok' ); } }; var c = $.extend( {}, a, b ); c.func(); // alerts 'ok' 

In JavaScript, there is often no practical difference between functions and other values, so you can treat functions in the same way as other objects or data types.