使用jQuery插件设计模式的调用方法 [英] Call methods using jQuery Plugin design pattern

问题描述

我一直在使用jQuery Boilerplate开发插件，但我不知道的一件事是如何从插件外部调用方法.

I've been using the jQuery Boilerplate for developing plugins and one thing I can't figure out is how to call methods from outside the plugin.

作为参考，这是我正在谈论的样板代码: http://jqueryboilerplate.com/

For reference, here is the boilerplate code I'm talking about: http://jqueryboilerplate.com/

在我的小提琴中，

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');
});

我正在尝试使用以下语法调用再见方法:

I am trying to call the goodbye method using the following syntax:

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

我该如何实现?预先感谢

How do I achieve this? Thanks in advance

推荐答案

您必须获得对该类的引用，才能使用该插件结构调用其方法.

You'll have to get a reference to the class to call it's method with that plugin structure.

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

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

要执行所需的操作，必须摆脱document.write对其进行测试.

To do what you want, you must get rid of document.write to test it.

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');
});​

查看控制台以获取信息.

Look to the console for information.

这篇关于使用jQuery插件设计模式的调用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！