使用jQuery插件模板调用带选项的公共方法时出现未定义错误，如何解决？

我来帮你排查这个问题～你遇到的Cannot read property '{nameofpublicmethod}' of undefined错误，核心原因是插件未初始化就尝试获取实例，再加上调用方式的几个小问题，咱们一步步拆解修复：

错误原因拆解 #

1. 插件实例未创建就获取：你直接用$('#action').data('pluginA')的时候，还没调用$('#action').pluginA()初始化插件——只有执行插件初始化方法后，才会把实例存入元素的data中，所以此时data('pluginA')返回undefined，调用method1自然报错。
2. 空jQuery对象获取实例：$().data('pluginB')是对一个空的jQuery对象操作，你从来没给任何元素初始化过pluginB，这里也会返回undefined。
3. 方法调用逻辑错误：你的pluginA的method1不需要传参数，而且直接写method1()会立即执行绑定逻辑，不是把方法作为回调传递。

修正后的完整代码示例 #

第一步：调整插件内部逻辑（修复action未执行的问题）

先把pluginA的method1里的回调执行补上括号，否则plugin.settings.action只是引用函数，不会触发：

(function($) {
  $.pluginA = function(element, options) {
    var defaults = {
      action: function(){}
    }
    var plugin = this;
    plugin.settings = {}
    var $element = $(element), element = element;
    
    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
      console.log('plugin A called')
    }
    
    plugin.method1 = function(){
      $element.on('click', function(e){
        // 补上括号执行action回调
        plugin.settings.action();
        e.preventDefault();
      })
    }
    
    plugin.init();
  }
  
  $.fn.pluginA = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('pluginA')) {
        var plugin = new $.pluginA(this, options);
        $(this).data('pluginA', plugin);
      }
    });
  }
  
  // pluginB代码保持不变
  $.pluginB = function(element, options) {
    var defaults = {
      action: function(){}
    }
    var plugin = this;
    plugin.settings = {}
    var $element = $(element), element = element;
    
    plugin.init = function() {
      plugin.settings = $.extend({}, defaults, options);
      console.log('plugin B called')
    }
    
    plugin.method1 = function(){
      $element.on('click', function(e){
        alert("Plugin B action performed.");
        e.preventDefault();
      })
    }
    
    plugin.init();
  }
  
  $.fn.pluginB = function(options) {
    return this.each(function() {
      if (undefined == $(this).data('pluginB')) {
        var plugin = new $.pluginB(this, options);
        $(this).data('pluginB', plugin);
      }
    });
  }
})(jQuery);

第二步：正确初始化并调用插件

必须先执行插件初始化，再获取实例调用方法：

<a href="#" id="action">Action</a>
<script>
(function($){
  // 1. 先初始化pluginA到#action，同时定义action回调
  $('#action').pluginA({
    action: function() {
      // 在回调里调用pluginB的method1
      $('#action').data('pluginB').method1();
    }
  });
  
  // 2. 初始化pluginB到#action（也可以绑定到其他元素）
  $('#action').pluginB();
  
  // 3. 调用pluginA的method1绑定点击事件
  $('#action').data('pluginA').method1();
})(jQuery);
</script>

补充注意事项 #

• 初始化顺序不能乱：必须先调用$(selector).pluginX()，才能通过data('pluginX')获取到实例。
• 如果pluginB需要绑定到其他元素，只需要把$('#action').pluginB()换成对应选择器，调用时也用对应元素的data('pluginB')即可。
• 传递回调时要传函数引用，不要立即执行（比如不要写action: $().data('pluginB').method1()，而是在回调函数内部调用）。

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