带函数的$.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

一个人为的例子，但我认为它说明了这一点。

Answer 3

是的，您可以扩展具有函数值的对象。

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'

在JavaScript中，函数和其他值之间通常没有实际区别，因此您可以像对待其他对象或数据类型一样对待函数。