如何在jQuery中存储插件方法调用至另一插件配置且不立即执行

你遇到的这个问题很典型：当把插件B的方法赋值给插件A的配置项时，方法会在配置定义阶段立即执行，而不是等到需要时才触发。我们来一步步解决它。

原代码问题分析 #

你的初始化代码里：

$('button').pluginA({ action: $('#message').pluginB("btnAction") });

这里的$('#message').pluginB("btnAction")是直接调用了插件B的btnAction方法，它会立刻执行并返回结果（这里是undefined，因为btnAction没有返回值），而不是把方法本身作为引用赋值给action。

同时，插件A的点击事件里只是引用了settings.action，没有实际执行它：

$element.on('click', function(){
  settings.action; // 只是引用，不会执行函数
})

解决方案 #

1. 包装方法为匿名函数 #

把action的值改成一个匿名函数，这样赋值的是函数引用，只有在调用时才会执行内部的插件方法：

$('button').pluginA({ 
  action: function() { 
    // 这里才会触发pluginB的btnAction方法
    $('#message').pluginB("btnAction"); 
  } 
});

2. 修改插件A的执行逻辑 #

在插件A的init方法中，确保点击事件里执行这个函数（添加括号）：

init : function(options) {
  settings = $.extend({}, this.pluginA.defaults, options);
  return this.each(function() {
    $element = $(this);
    element = this;
    $element.on('click', function(){
      // 执行配置的action函数
      settings.action();
    })
  })
}

扩展优化（可选） #

如果想让配置更灵活（比如不硬编码目标元素），可以把目标元素和方法名分开传递：

$('button').pluginA({ 
  target: $('#message'),
  method: 'btnAction'
});

然后在插件A的点击事件中调用：

$element.on('click', function(){
  settings.target.pluginB(settings.method);
})

这样后期修改目标元素或方法名时，不需要修改内部逻辑，扩展性更好。

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