带有函数的$ .extend()

Question

我正在编写一个jQuery插件,需要执行的回调函数,例如,当从<select>插件中选择一个选项时应用.

我见过插件,允许你在传递它的选项中定义函数,如下所示:

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

我希望能够someEvent在我的插件代码中定义默认函数,但如果用户在它们传递的选项中定义该函数,它应该覆盖默认函数.这是可能的$.extend(),还是我在错误的地方看？

我已经看过插件创作教程,但我认为它不包括在任何地方扩展函数的默认行为.我已经阅读了有关使用init:函数的内容,但我宁愿只能定义一个函数(在插件名称空间内)并使用传递给插件的选项进行更改.

Answer 1

这是一个例子:

(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');
    }
});

如果您没有指定someEvent何时连接插件,将使用默认插件.

Answer 2

在javascript中,函数是第一类对象.意思是,您可以像使用任何其他变量一样使用函数:

//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'

如您所见,函数就像任何其他值一样.因此,您可以定义一个默认选项,它将是一个函数,并像其他任何东西一样覆盖它.

$.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

一个人为的例子,但我认为这说明了这一点.