使用jQuery插件设计模式调用方法

Question

我一直在使用jQuery Boilerplate开发插件，但有一件事我无法弄清楚，就是如何从插件外部调用方法。

以下是我所说的boilerplate代码的参考： http://jqueryboilerplate.com/

这是我的fiddle：

http://jsfiddle.net/D9JSQ/2/

下面是代码：

;(function ( $, window, document, undefined ) {

    var pluginName = 'test';
    var defaults;

    function Plugin(element, options) {
        this.element = element;

        this.options = $.extend( {}, defaults, options) ;

        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {
        init: function() {
            this.hello();
        },
        hello : function() {
            document.write('hello');
        },
        goodbye : function() {
            document.write('goodbye');
        }
    }


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


})( jQuery, window, document );

$(document).ready(function() {
    $("#foo").test();
    $("#foo").test('goodbye');
});

我正试图使用以下语法调用goodbye方法：

$("#foo").test('goodbye')

我该如何做到这一点？提前感谢。

- Andrew H

---

你可以查看我的回答。它有一个jQuery插件模板，具有可访问的方法，实际上非常类似于这个，但并不完全相同。 - Alexander

从jquery boilerplate wiki: https://github.com/jquery-boilerplate/jquery-boilerplate/wiki/Extending-jQuery-Boilerplate - jackocnr

Answer 1

你需要获取该类的引用，才能使用该插件架构来调用它的方法。

http://jsfiddle.net/D9JSQ/3/

$(document).ready(function() {
    var test = $("#foo").test().data("plugin_test");
    test.goodbye();
});

要做你想做的事，必须摆脱document.write来进行测试。 http://jsfiddle.net/D9JSQ/8/

;
(function($, window, document, undefined) {

    var pluginName = 'test';
    var defaults;

    function Plugin(element, options) {
        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._name = pluginName;

        this.init();
    }

    Plugin.prototype = {
        init: function(name) {
            this.hello();
        },
        hello: function(name) {
            console.log('hello');
        },
        goodbye: function(name) {
            console.log('goodbye');
        }
    }


    $.fn[pluginName] = function(options) {
        return this.each(function() {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
            else if ($.isFunction(Plugin.prototype[options])) {
                $.data(this, 'plugin_' + pluginName)[options]();
            }
        });
    }


})(jQuery, window, document);

$(document).ready(function() {
    $("#foo").test();
    $("#foo").test('goodbye');
});​

查看控制台获取信息。

- Kevin B

---

是的，您只需向结构添加一个elseif，以检查现有方法的原型。如果存在，则执行它。这是一个很好的例子，没有必要重新发明轮子：http://keith-wood.name/pluginFramework.html - Kevin B

这种方法能否传递参数？ - Fisu

@KevinB 很好的例子。我们怎么能反过来做呢？在样板方法内访问在样板之外的函数？ - Benn

你需要给我一个例子，我不知道你的意思。 - Kevin B

你只需返回你想要的内容，而不是返回“return this.each...” - Kevin B