javascript - JavaScript 函数的多种参数类型

Question

这个问题已经有答案了:

How to create a jQuery plugin with methods? (20 个回答)

已关闭 10 年前。

来自jQuery boilerplate site ，我想出了一个如下所示的插件:

;(function($, window, document, undefined){
  "use strict"; 

  var defaults = {
        abc: 1,
        def: 'xyz'        
      };

  function Plugin(element, options){
    this.options = $.extend({}, defaults, options, element.dataset);
    this.element = element;
  }

  plugin.prototype = {
     goTo: function(where){
       // ...
     },

     close: function(){
       $(this.element).removeData('_myplug');   
     }
  };

  $.fn.myPlugin = function(options){
    return this.each(function(){
      if(!$.data(this, '_myplug'))
        $.data(this, '_myplug', new Plugin(this, options));

      if($.isPlainObject(options))
        return;

      // here how to check if 'options' matches one of the
      // functions, then call it with the rest of the variables
    });
  };

})(jQuery, window, document);

所以它可以像这样使用

$('.stuff').myPlugin({abc: 5});

我怎样才能允许调用公共(public)方法，如下所示:

$('.stuff').myPlugin('goTo', 'top');
// should call instance.goTo('top');

或者:

$('.stuff').myPlugin('close');
// should call instance.close();

？

我知道可以通过在 $.fn.myPlugin 函数声明中添加更多变量，然后使用 if 语句检查选项是否是字符串，但我想知道是否有更好的方法来做到这一点

<小时/>

例如，在 PHP 中，它看起来像这样:

$args = func_get_args();
$arg1 = array_shift($args);
return call_user_func_array(array($this, $arg1), $args);

如何在 JavaScript 中执行此操作？

Answer 1

简而言之，您可以这样做:

var instance = $.data(this, '_myplug');
if (typeof options === "string" && typeof instance[options] === "function") {
    instance[options].apply(instance, arguments.slice(1));
}

说明

首先，检查 options 是否为字符串，以及您的实例是否包含名称为 options 的方法。

然后使用arguments数组。您可以从任何函数内部访问此数组，它包含调用该函数时传递的所有参数(无论这些参数是否是函数定义的一部分)。

最后，您可以使用 function.apply() 方法，将参数数组的修改版本(除第一个参数之外的所有参数)传递给实例的方法。