Question

我写了一个带有以下“签名”的插件：

jQuery.fn.attach = function(element, settings, duration, options, callback) {

此处element是jQuery对象，settings是我的插件的自定义设置，duration，options和callback都是我使用的参数在jQuery的动画中，像这样：

someObject.animate({ someCSS }, duration, options, callback);

现在，我的问题是：是否可以让这个功能更容易调用？例如，现在，为了让一切按预期工作......我必须包括所有参数并将我不使用的参数设置为null：

$(this).attach($('#e1-blue'), null, 3000, null, function() { alert('done'); });

能够将其称为：

，这将是一件好事

$(this).attach($('#e1-blue'), 3000, function() { alert('done'); });

和这个（ofc）......

$(this).attach($('#e1-blue'), 3000);

有什么建议吗？

Answer 1

我设置了一个默认对象，并且只接受插件函数中的一个参数

  $.fn.myPlugin=function(opt){
    var o=$.extend({}, $.fn.myPlugin.defaults, opt||{});
  };
  $.fn.myPlugin.defaults={
    element: null,
    settings: null,
    options: null,
    callback: null,
    duration: 250
  };

实例化插件

$('#myElement').myPlugin({element: $('#el-blue'), duration: 2000})

如果你每次都传递一些东西，你可以将选项对象作为第二个参数。

  $.fn.myPlugin=function(element, opt){
   return this.each(function(){
    var o=$.extend({}, $.fn.myPlugin.defaults, opt||{});
    //do some stuff
    if (o.callback) {
     o.callback.call(this, o);
    }
   });
  };

$('#myElement').myPlugin($('#el-blue'), {duration: 3000, callback: function(){}});

Answer 2

我能想到的最简单的事情是重新排序参数，以便最常用的参数首先出现。因此，如果您将功能更改为：

jQuery.fn.attach = function(element, duration, callback, settings, options) {

然后你可以通过将默认值放入函数体中来使所有东西（可能是第一个参数除外）可选。如：

if(!duration)
   duration = 3000;

然后

$(this).attach($('#e1-blue'), 3000, function() { alert('done'); });

和

$(this).attach($('#e1-blue'), 3000);

两者都有效，其他值会自动填充null。

严格来说，您可以检查函数内的参数类型，例如如果第二个参数是一个整数，则它是duration，如果它是一个函数callback，如果它是一个对象它是settings，但我不认为有人必须关注你的代码以后会感谢你的。如果例如，它还可能使得该功能难以在以后延伸。需要第二个整数参数。

Answer 3

我建议您查看方法签名，以了解人们如何处理可选参数。例如，查看http://gist.github.com/277432#LID5445以查看jQuery.speed背后的设置，这是jQuery.animate使用的设置 - http://gist.github.com/277432#LID5445。

无论如何，你只想查看你的论点类型，看看是否有人通过它们。

更容易调用自定义jQuery插件

3 个答案: