如何调用jQuery插件初始化对象的函数？能否直接调用实例方法？

先直接回答你的第二个问题：不行，你没办法直接用$('.selector').someFunction()的方式调用someFunction。原因很简单——someFunction是定义在Plugin类的原型上的，属于插件实例的方法；而你通过$('.selector')拿到的是jQuery对象，它的原型（$.fn）上只挂载了Plugin这个初始化方法，并没有someFunction，所以直接调用会报错。

那正确的调用方式是什么呢？结合你给出的插件代码，有两种常用方案：

方案1：直接获取插件实例并调用方法 #

你的插件代码里已经用$.data(this, 'plugin')把Plugin的实例存储在了DOM元素的data属性中，所以我们可以直接取出这个实例，再调用它的方法：

• 如果选择器只匹配单个元素：

  // 获取插件实例
  const pluginInstance = $('.selector').data('plugin');
  // 调用方法
  if (pluginInstance) { // 先判断实例是否存在，避免报错
    pluginInstance.someFunction();
  }
  

• 如果选择器匹配多个元素，需要遍历每个元素处理：

  $('.selector').each(function() {
    const instance = $(this).data('plugin');
    if (instance) {
      instance.someFunction();
    }
  });
  

方案2：扩展插件，支持通过jQuery对象直接调用方法 #

如果觉得每次取实例太麻烦，你可以修改插件的$.fn.Plugin方法，让它支持通过传入方法名的方式调用实例方法，这也是jQuery插件的常见设计模式：

修改后的插件代码如下：

function Plugin(e) { ... }
$.extend(Plugin.prototype, { 
  someFunction: function() { ... },
  // 其他实例方法
  anotherFunction: function(arg) { ... }
});

$.fn.Plugin = function(methodOrOptions) {
  // 如果传入的是字符串，视为调用方法
  if (typeof methodOrOptions === 'string') {
    // 取出方法名之外的参数
    const args = Array.prototype.slice.call(arguments, 1);
    let methodResult;
    
    this.each(function() {
      const instance = $.data(this, 'plugin');
      // 检查实例存在且方法存在
      if (instance && typeof instance[methodOrOptions] === 'function') {
        // 调用方法并保存返回值（如果有）
        methodResult = instance[methodOrOptions].apply(instance, args);
      }
    });
    
    // 如果方法有返回值，返回它；否则返回jQuery对象保持链式调用
    return methodResult !== undefined ? methodResult : this;
  } 
  // 否则视为初始化插件
  else {
    return this.each(function(){
      if(!$.data(this, 'plugin')){
        $.data(this, 'plugin', new Plugin(this));
      }
    });
  }
};

修改后，你就可以这样调用实例方法了：

// 调用someFunction
$('.selector').Plugin('someFunction');
// 调用带参数的anotherFunction
$('.selector').Plugin('anotherFunction', 'hello world');

这种方式既保持了jQuery的链式调用特性，又能方便地调用插件内部的方法。

内容的提问来源于stack exchange，提问作者sankorati