$.extend() 与函数

Question

我正在编写一个 jQuery 插件，它需要执行回调函数，例如，当从应用插件的 中选择一个选项时。

我见过一些插件允许您在传递的选项中定义函数，如下所示：

$('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 中，函数和其他值之间通常没有实际区别，因此您可以像对待其他对象或数据类型一样对待函数。