如何调用jquery插件的方法

Posted 2023-03-21

参考技术A 　　jQuery的插件使用方法具体步骤如下：

　　1、调用库文件使用jQuery必须链接jQuery的库文件，无论是压缩版还是正常版，必须至少在网页中链接一个；

　　2、调用Jquery插件应用做好的jQuery插件效果。比如jQuery官网制作的插件jQuery，在使用它时不仅要链接库文件，还要链接UI文件以及UI的CSS文件。

　　Jquery是一个优秀的javascript库，还兼容各种浏览器。jQuery使用户能更方便地处理html、events、实现动画效果，并且方便地为网站提供AJAX交互。

如何从插件调用 jQuery 插件中的公共函数

【中文标题】如何从插件调用 jQuery 插件中的公共函数

【英文标题】：How to call public function within jQuery plugin from the plugin

【发布时间】：2014-09-01 06:12:26

【问题描述】：

我正在开发一个 jQuery 插件。这是我的第一次，所以如果这是一个愚蠢的问题，我很抱歉。

我在插件中有几个公共方法。

我正在尝试从插件定义内部和插件外部调用这些方法，其方式类似于 public 关键字在 Java 中用于方法的方式，但我不断收到 @987654326 @错误。

我尝试了几种调用方式，但仍然无法正常工作。

关于如何做到这一点的任何想法？

这是我的代码库示例：

$(document).ready(function()     

    (function($) 

        // Plugin Definition
        $.fn.popup = function(options)
            // code here...

            // SUBMIT FORM
            $(settings.popupSubmitSelector).on("click", function(e) 
                submitForm();             // call to my method
                this.submitForm();
                $.fn.popup.submitForm();   
            );

            // more code here...

            // my public method
            this.submitForm = function()
                // method code here
            

            // more code...
        
    (jQuery));
);

【问题讨论】：

我们能看到你的插件定义的框架吗？

您是否遵循了如何开发 jQuery 插件的教程？

@wiesion 是的，我查看了jquery.com、scriptble.com/2011/02/14/… 和learningjquery.com/2007/10/a-plugin-development-pattern 上的示例

@dartanian300 后者是 2007 年的，前者似乎是断链。请转至learn.jquery.com/plugins

@wiesion 我不知道为什么第二个链接坏了。尝试将 http:// 放在它之前。另外，您发布的那个页面是我发布的 jQuery 页面上的页面之一。

【参考方案1】：

来自Provide Public Access to Secondary Functions as Applicable，实现目标的一种方法是定义方法如下：

$.fn.popup.submitForm = function() 
    //method body
;

你可以在插件外部或内部以同样的方式调用它：

$.fn.popup.submitForm();

【讨论】：

我想你误会了。我需要从插件本身调用该函数。我还发布了更多信息，这有帮助吗？

一开始就分享足够的信息。除非您真的想在插件外部调用该方法，否则不应在其前面加上 this .... 只需将其声明为任何其他函数，它只能在插件内部访问。

我需要从插件内部和插件外部访问。

那很好。我想我们现在正在取得进展。然后，您可能希望按照本文的答案定义您的方法：***.com/questions/1117086，并稍作修改，如上所示。

【参考方案2】：

我想我现在明白你的问题了。如果要在同一对象的实例中执行公共方法，则必须正确引用当前实例。在 JS 中，您可以通过这种方式实现：

var MyObj = function() 
  var instance = this;

  this.publicMethod = function() 
    alert('test');
  

  var privateMethod = function() 
    instance.publicMethod();
  

  return this;

更新这是使用代理函数公开​​功能的插件的基本框架

(function($) 
    var settings =  ... ;

    var methods = 
        init: function(options)  ... submitForm() ... ,
        submitForm: function()  /* code here */ 
    ;

    $.fn.popup = 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 on jQuery.popup');
        
    ;

)(jQuery);

然后您可以从外部访问

$('selector').popup('submitForm');

【讨论】：

但是，这仍然不是 jQuery 插件的最佳实践。您应该将所有方法收集为私有方法并通过代理函数公开​​它们。

这似乎有效！您能否也提供一个您提到的代理函数方法的示例？

更新了我的答案并使用代理方法添加了一个基本的插件框架

感谢您的帮助！您能否解释一下为什么您的第一个答案是不好的做法？

在 JS 方面绝对不是坏习惯；这不是 jQuery 插件的最佳实践。通过使用代理方法，您不必在内部使用其方法时显式引用插件的实例，并且从外部公开调用它们只需将方法名称作为参数传递给您的插件。

【参考方案3】：

尝试类似：

$(document).ready(function () 

$(selector).click(function() 
    nameFunc();
);

);

var nameFunc = function () 

//Code

;

或者：

$(document).ready(function () 

$(selector).click(function() 
    OtherFunc();
);

function OtherFunc() 
 //Code
;

);

【讨论】：

我已经将整个插件包装在$(document).ready(function() ); 中，但它似乎并没有解决这个问题。正在从插件定义中调用事件侦听器。

我认为您必须删除“this”前缀，因为您是在函数之外调用它...

我认为@user3558931 在他分享给您的帖子中给出了正确答案。