使用构造函数模式和插件原型时如何在jquery中触发函数？

Posted 2023-05-09

【中文标题】使用构造函数模式和插件原型时如何在jquery中触发函数？

【英文标题】：How to trigger a function in jquery when using Constructor pattern and prototypes for plugins?

【发布时间】：2013-04-08 11:27:43

【问题描述】：

问题如下（批评者赞赏）： 我正在编写一个 jquery 插件，如下面的示例代码所示：

;(function($, document, window, undefined) 
    $.fn.myPlugin = function(params) 
        return this.each(function() 
            $(this).data('my', new MyPlugin(params));
        
    

    function MyPlugin(params) 
        // do something
    

    MyPlugin.prototype = 
        init: function()  ... ,
        update: function()  ... 
    

)(jQuery, document, window);

现在我想在 MyPlugin 的原型中调用 update 函数，比如在 $(window).onresize 上。 如果可能，请有人解释（也欢迎解决方法）。提前致谢

【问题讨论】：

请参阅docs.jquery.com/Plugins/Authoring#Plugin_Methods，了解构建 jQuery 插件的正确方法以及如何定义可以在插件中调用的方法。

感谢您的回复，但我已经通过docs.jquery.com/Plugins/Authoring#Plugin_Methods 并且可以使用那里提到的方法。我所关注的是我可以将这些方法包装在一个对象中以进行更多结构化吗？我正在考虑这些行，因为我需要知道我的插件是否已经初始化，为此我正在使用 jQuery.data API。

【参考方案1】：

不需要使用原型方法。如authoring JQuery plugins 的文档中所述，您返回插件对象的实例。假设您的插件对象是自定义的，则不需要您使用原型方法。

话虽如此，当您初始化插件时可以访问您的更新功能，您可以在其中绑定到窗口调整大小事件（假设您希望插件在窗口调整大小时始终更新）：

$(window).resize(function()
  //if not a local function, then you can use $this.update()
   update();

【参考方案2】：

data jquery 保存创建的对象，以便您可以使用它来调用这样的原型函数

$(window).resize(function()
 $('element_selector_here').data('my').update();