如何在自定义jQuery函数外部调用其内部定义的函数
你当前调用失效的核心原因是GetResult属于$.fn.Test的内部私有函数,作用域仅限制在函数内部,默认无法被外部直接访问。要实现外部调用,只需要将需要公开的方法挂载到jQuery实例上即可。
最简修改方案
直接在你的原有代码基础上新增两行代码即可生效:
$(function() { $.fn.Test = function() { const $master = this; const $t1 = $master.find(".txt1"), $t2 = $master.find(".txt2"), $notice = $master.find(".notice"); function Check() { $notice.removeClass("error success").hide(); if ($t1.val().length === 0 && $t2.val().length === 0) { return; } if ($t1.val() == $t2.val()) { $notice.addClass("success").text("Text Matches!").show(); } else{ $notice.addClass("error").text("Text Does Not Match").show(); } } $t1.on("keyup", Check); $t2.on("keyup", Check); /****** 这是我想要访问的目标函数 ********/ function GetResult() { return $t1.val() == $t2.val(); } // ----------------新增代码开始---------------- // 将需要对外暴露的方法挂载到当前jQuery实例上 $master.GetResult = GetResult; // 返回当前实例,符合jQuery插件链式调用约定,同时让外部可以拿到挂载了方法的实例 return $master; // ----------------新增代码结束---------------- }; let $test = $("#container").Test(); $("#btn").on("click", function() { console.log($test.GetResult()); // 现在已经可以正常调用 }); });
多方法场景的规范插件模式
如果你的插件后续需要暴露多个公共方法,更推荐使用行业通用的jQuery插件调度模式,可维护性更强:
$.fn.Test = function(options) { // 所有公共方法统一维护 const publicMethods = { // 初始化方法 init: function() { const $master = this; const $t1 = $master.find(".txt1"), $t2 = $master.find(".txt2"), $notice = $master.find(".notice"); // 私有方法无需对外暴露,直接定义在init内即可 function Check() { $notice.removeClass("error success").hide(); if ($t1.val().length === 0 && $t2.val().length === 0) return; $notice.addClass($t1.val() === $t2.val() ? "success" : "error") .text($t1.val() === $t2.val() ? "Text Matches!" : "Text Does Not Match") .show(); } $t1.on("keyup", Check); $t2.on("keyup", Check); return $master; }, // 公共方法:获取校验结果 GetResult: function() { const $t1 = this.find(".txt1"), $t2 = this.find(".txt2"); return $t1.val() === $t2.val(); } } // 方法调度逻辑 if (publicMethods[options]) { // 调用指定公共方法 return publicMethods[options].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof options === "object" || !options) { // 无匹配方法或传入的是配置参数时,走初始化逻辑 return publicMethods.init.apply(this, arguments); } else { $.error(`Test插件不存在方法:${options}`); } } // 使用方式 $("#container").Test(); // 初始化插件 // 调用公共方法 console.log($("#container").Test("GetResult"));
内容的提问来源于stack exchange,提问作者bagofmilk
相关产品推荐
相关产品推荐

