如何从全局范围调用 jquery 函数内的方法？

Posted 2023-02-21

【中文标题】如何从全局范围调用 jquery 函数内的方法？

【英文标题】：How to call a method inside a jquery function from global scope?

【发布时间】：2013-06-21 04:43:06

【问题描述】：

我正在寻找一种在 jquery 函数中调用方法的方法。

示例：在上面的代码中，如何在全局范围内调用method() 方法？

(function( $ ) 

    $.fn.test = function() 

        var method = function() 
            alert('test succeeded!');
        ;

    

)( jQuery );

我尝试了以下代码：

$(document).ready(function() 

    $(document).test.method(); // undefined

);

但这无济于事。

小提琴：http://jsfiddle.net/kB7mc/

【参考方案1】：

您的方法仅在函数test 内可用，您不能在范围外访问它。相反，您可以这样做。另外，在调用它时，请记住将方法调用 () 放入 test 即 $(document).test().method(); 而不是 $(document).test.method();

(function( $ ) 

    $.fn.test = function() 
         var method = function() 
            alert('test succeeded!');
        ;

         return method:method;
    

)( jQuery );

$(document).ready(function() 
    $(document).test().method(); // undefined
);

Fiddle

使用 Jquery 插件模式。

(function ($) 
    var methods = 

        method : function () 
            alert('test succeeded!');
            return this; //return element for chaining
        ,
         method2 : function () 
            alert('test2 succeeded!');
             return this;
        
    ;

    $.fn.test = function (method) 
        if (methods[method]) 
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
         else if (typeof method === 'object' || !method) 
            return methods.init.apply(this, arguments);
         else 
            $.error('Method ' + method + ' does not exist');
        
    

)(jQuery);

$(document).ready(function () 
    $(document).test('method'); 
    $(document).test('method2'); 

);

Fiddle

【讨论】：

嗯，是在猜测可见性/范围问题，但实际上我不想在我的 jquery 插件末尾返回 this 以外的其他内容以匹配良好实践。您认为还有其他方法可以实现这一目标吗？你认为我需要重新设计我的插件吗？我有需要使用插件中定义的方法的事件监听器。

@AlainTiemblo 在这种情况下，您可能会遵循 jquery 插件模式...通过在选项参数中传入方法名称。并返回元素本身进行链接。

这是learn.jquery.com/plugins/advanced-plugin-concepts的网址

这真的很简单，只是不知道而已。谢谢。