本文介绍如何让 jquery 插件支持将函数作为配置项传入，并在运行时调用该函数获取实际值（如布尔标志），从而实现灵活的条件控制逻辑。
本文介绍如何让 jquery 插件支持将函数作为配置项传入，并在运行时调用该函数获取实际值（如布尔标志），从而实现灵活的条件控制逻辑。
在开发可复用的 jQuery 插件（如 ROButton）时，常需根据运行时状态动态决定行为——例如是否启用点击锁定（lockout）。若直接在初始化时调用 flagFunction()（即 lockout: flagFunction()），其返回值仅在插件实例化时计算一次，无法响应后续 DOM 状态、用户操作或异步数据变化。真正的解决方案是：传入函数引用，而非调用结果；并在事件触发时按需执行该函数，获取最新值。
为此，需对插件内部逻辑做两处关键改造：
- 接收函数引用：调用时省略括号，仅传递函数名（如 lockout: flagFunction）；
- 运行时动态求值：在 click 事件处理器中判断 options.lockout 类型，若是函数则立即调用，否则直接使用原始值。
以下是优化后的完整插件代码：
jQuery 1.12.4
下载
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
(function($) {
$.fn.extend({
ROButton: function(options) {
var defaults = {
onClick: function() { return false; },
lockout: true,
self: this
};
options = $.extend({}, defaults, options);
return this.each(function() {
$(this).button().on("click", function() {
// ✅ 动态解析 lockout：支持布尔值或返回布尔的函数
var lockout = typeof options.lockout === 'function'
? options.lockout.call(this) // 推荐使用 .call(this) 保证 this 指向当前按钮元素
: options.lockout;
if (options.onClick.call(this) !== false && lockout) {
// 执行专用锁定逻辑（如禁用按钮、显示加载态等）
$(this).prop('disabled', true);
// 注意：此处不应重置 options = defaults（会破坏闭包状态），应改用局部变量或重新设计状态管理
}
});
});
}
});
})(jQuery);
调用方式相应更新为：
$("button.saveBtn").ROButton({
onClick: function() {
console.log("Button clicked");
return true; // 允许继续执行
},
lockout: function() {
// ✅ 每次点击都实时计算：例如检查表单是否有效、API 是否就绪等
return !$("#myForm")[0].checkValidity() || isApiBusy();
}
});
⚠️ 重要注意事项：
- 避免在事件处理器中直接赋值 options = defaults —— 这会覆盖闭包中的 options 引用，导致后续点击无法读取最新配置。应改用独立的状态变量（如 var currentLockout = ...）或通过 data() 存储状态。
- 推荐使用 .call(this) 调用 onClick 和 lockout 函数，确保回调内 this 指向当前被点击的 DOM 元素，便于操作上下文。
- 若 flagFunction 依赖异步结果（如 AJAX），需改用 Promise + .then() 或封装为返回布尔的同步代理函数（例如缓存上一次异步结果），因为事件处理器必须同步返回判断值。
通过这一模式，ROButton 插件即可真正支持“动态配置”，让交互逻辑随应用状态实时响应，大幅提升组件的健壮性与可维护性。
