调用jquery插件的公共方法

Posted 2023-02-25

【中文标题】调用jquery插件的公共方法

【英文标题】：Calling public method of jquery plugin

【发布时间】：2013-08-08 19:41:21

【问题描述】：

我已经尝试了来自该站点的 jQuery 插件样板：jQuery_boilerplate，但我不能调用公共方法 fooBar。 我的实现看起来像：

/**
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, English comments: @addyosmani
 * More further changes, German translation: @klarstil
 * Licensed under the MIT license
 */
;(function ( $, window, document, undefined ) 
    "use strict";

    var pluginName = 'defaultPluginName',
        defaults = 
            propertyName: "value"
        ;    

    var privateMethod = function() 
    ;

    function Plugin( element, options ) 

        this.element = element;
        this.options = $.extend( , defaults, options) ;

        this._defaults = defaults;
        this._name = pluginName;

        this.init();

    

    Plugin.prototype.init = function () 
    ;

    Plugin.prototype.fooBar = function(someValue) 
        var fooBarModifier = 3;

        function privateFooBar(someValue) 
            return someValue * fooBarModifier;
        

        someValue = privateFooBar(someValue);
        return someValue;
    ;

    $.fn[pluginName] = function ( options ) 
        return this.each(function () 
            if (!$.data(this, 'plugin_' + pluginName)) 
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            
        );
    
)( jQuery, window, document );

例如，我使用这样的插件：

$('#wrapper').defaultPluginName();

我尝试这样调用方法：

$('#wrapper').fooBar();

但是我的控制台给了我一个错误：

TypeError: $(...).fooBar 不是函数 $('#wrapper').fooBar();

如何在此选择上调用方法？

【问题讨论】：

这是因为$('#wrapper'). 没有返回Plugin 的实例，它为匹配的没有fooBar 方法的dom 元素集返回一个jQuery 包装器

【参考方案1】：

这是因为$('#wrapper') 没有返回插件的实例，它为匹配的没有fooBar 方法的DOM 元素集返回一个jQuery 包装器。

如果你想调用插件的公共方法，试试：

$('#wrapper').data('plugin_defaultPluginName').fooBar();

插件实例作为数据存储到名为'plugin_' + pluginName的元素中，所以：

$('#wrapper').data('plugin_defaultPluginName') 将返回名为 defaultPluginName 的插件实例 .fooBar(); 在插件实例中调用 fooBar 方法

【讨论】：

如果我想仍然使用 $('#wrapper').fooBar(); 来调用方法，如何修改代码