jQuery插件扩展异常：新增方法无法通过jQuery对象直接调用

你当前的问题出在方法绑定的时机上：

• 插件初始化时，会遍历当时MyPluginInstance.prototype上的方法，把它们绑定到jQuery元素对象上；
• 但你的扩展代码是在插件初始化之后（或插件第一次绑定方法之后）才给原型添加新方法，这些新增方法并没有被绑定到已初始化的jQuery元素上，所以直接调用$el.loadData()会报错。

下面提供两种可行的修复方式，你可以根据需求选择：

方式一：每次调用插件时重新同步原型方法 #

修改插件代码，把绑定方法的逻辑抽成独立函数，并且在每次调用MyPlugin()时都重新执行绑定，这样无论何时添加的原型方法，都会被同步到jQuery元素上：

function MyPluginInstance($el, settings){
    this.$el = $el;
    this.settings = settings;
}

(function ( $ ) {
    function matchRow(inst, masterIndex, filter){
        return cellValue != null && cellValue.toString().toLowerCase().includes(filter);
    }

    MyPluginInstance.prototype.initialize = function(){
        return this;
    }

    MyPluginInstance.prototype.applyFilter = function(filter){
        // 你的方法逻辑
    }

    // 抽离绑定方法的通用逻辑
    function bindInstanceMethods($el, inst) {
        // 先清理已绑定的旧方法（可选，避免重复绑定）
        for (const key of Object.getOwnPropertyNames($el)) {
            if (typeof $el[key] === 'function' && MyPluginInstance.prototype.hasOwnProperty(key)) {
                delete $el[key];
            }
        }
        // 绑定所有原型方法到jQuery元素
        for (const key of Object.getOwnPropertyNames(MyPluginInstance.prototype)) {
            if (key !== "constructor") {
                $el[key] = inst[key].bind(inst);
            }
        }
    }

    $.fn.MyPlugin = function(options){
        const defaults = {};
        const settings = $.extend(true, defaults, options);

        return this.each(function(){
            const $this = $(this);
            let inst = $this.data("MyPlugin");

            if (!inst) {
                inst = new MyPluginInstance($this, settings);
                $this.data("MyPlugin", inst);
                inst.initialize();
            }

            // 每次调用插件都重新同步原型方法
            bindInstanceMethods($this, inst);
        });
    };

}( jQuery ));

页面调用修改 #

加载扩展后，只需再调用一次MyPlugin()（无需传参数）即可完成新方法的绑定：

<script src="MyPlugin.js"></script>
<script src="MyExtension.js"></script>

<script>
    $(function(){
        var $el = $('#thing').MyPlugin();
        // 加载扩展后重新同步方法
        $el.MyPlugin();
        
        $el.loadData(someData); // 现在可以正常调用
    });
</script>

方式二：添加专门的方法刷新绑定 #

如果你不想每次调用MyPlugin()都触发同步，可以给插件添加一个单独的刷新方法，按需调用：

在插件代码末尾添加：

// 新增刷新方法
$.fn.MyPluginRefreshMethods = function() {
    return this.each(function(){
        const $this = $(this);
        const inst = $this.data("MyPlugin");
        if (inst) {
            bindInstanceMethods($this, inst);
        }
    });
};

页面调用修改 #

<script src="MyPlugin.js"></script>
<script src="MyExtension.js"></script>

<script>
    $(function(){
        var $el = $('#thing').MyPlugin();
        // 调用刷新方法绑定新扩展的方法
        $el.MyPluginRefreshMethods();
        
        $el.loadData(someData); // 正常调用
    });
</script>

额外建议 #

如果希望扩展更灵活，可以考虑：

1. 把MyPluginInstance暴露为全局变量（或通过$.MyPlugin.Instance的方式暴露），方便扩展；
2. 在插件初始化时，允许传入扩展方法，或者提供一个extend接口来注册新方法，避免直接修改原型（但直接修改原型也是常见的扩展方式）。

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