Question

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

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

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

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

我已经看了plugin authoring教程，但我认为它不包括在任何地方扩展 functions 的默认行为。我已经阅读了有关使用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中，函数和其他值之间通常没有实际区别，因此您可以像处理其他对象或数据类型一样处理函数。

带有函数的$ .extend（）

3 个答案: