Question

我有一个基本插件，可以在插件中填充数组。如何通过带参数的方法调用获取该数组。这是我的第一个插件，如果这是一个愚蠢的问题，请放轻松。

基本插件

(function($) {
    $.fn.myPlugin = function() {
        return this.each(function(){
            tagArray = []; // my array that is populated
            //code that does stuff to populate array
        });
    }
})(jQuery);

我想像这样得到tagArray ......

var arr = $('.className').myPlugin("getArray");

然后我可以在其他地方使用该数组。我怎么能做到这一点？

感谢您的帮助。

Answer 1

这是一个相当奇怪的要求，但如果只有参数，那么一个简单的方法就是这样：

(function($) {
    $.fn.myPlugin = function(param) {
        var tagArray = [],
            elems    = this.each(function(){
                tagArray.push( $(this).text() ); // whatever you do ??
        });
        return param == 'getArray' ? tagArray : elems;
    }    // ^^ if the parameter is passed, return the array, otherwise the elems
})(jQuery);

FIDDLE

这有点hackish，但它的确有效。您也可以返回this.map(function() {...以始终返回数组等，或者阅读如何将多个参数传递给插件并执行不同的操作等，而不是上面使用的'getArray'的硬编码检查。 / p>

Answer 2

我不明白为什么你需要"getArray"参数。在任何情况下，您只需要定义一个数组并使您的函数返回它：

(function($) {
    $.fn.myPlugin = function() {
        var tagArray = [];
        this.each(function(){
            // add something to tagArray
        });
        return tagArray;
    }
})(jQuery);

Answer 3

尝试

(function($) {

    function Plugin($el, opts){
        this.tagArray = [];

        this.tagArray.push($el.attr('id')) //for testing the retuned instance

        $el.data('myPlugin', this);
    }

    Plugin.prototype.getTagArray = function(){
        return this.tagArray;
    }


    $.fn.myPlugin = function(opts) {
        if($.type(opts) == 'string'){
            var plugin = this.data('myPlugin');
            return plugin[opts]();
        }

        return this.each(function(){
            var $this = $(this);

            new Plugin($this);
        });
    }
})(jQuery);

jQuery(function(){
    $('#e1, #e2, #e3').myPlugin();

    console.log($('#e1').myPlugin('getTagArray'))
    console.log($('#e2').myPlugin('getTagArray'))
    console.log($('#e3, #e1').myPlugin('getTagArray'))
})

演示：Fiddle

Answer 4

我刚刚自己编写了一个JQuery插件，这是我确定的基本结构：

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

    //Local Methods
    var methods = {
        init : function(options){
            //stuff you want to do when your plugin initializes i.e. when you do $('selector').myPlugin(options)
        },
        getArray: function(){
            //your getArray method. Put your get array logic here
        }
    }

    //Plugin Initialize 
    $.fn.myPlugin  = function(args){

        if ( methods[args] )
        {
            //execute JQuery Plugin Method
            return methods[ args ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        }
        else if ( typeof args === 'object' || ! args ) 
        {
            //Process JQuery Plugin Options
            var opts = $.extend({}, $.fn.myPlugin.defaults, args);
            var new_args = new Array(opts);
            return methods.init.apply( this, new_args );
        }
        else 
        {
            $.error( 'Method ' +  args + ' does not exist on myPlugin' );
        }
    };

    //Define Default Options
    $.fn.myPlugin.defaults = {
        option_1: '',
        option_2: '',
        option_n: ''
    }

    //API Methods
    var M = $.myPlugin = function(){};
    $.extend(M, {
        getArray: function(){
            return methods.getArray();
        }
    });

}(window, document, jQuery));

这样做可以像往常一样启动插件：

$('.className').myPlugin(options);

和/或像这样调用getArray函数：

$.myPlugin.getArray();

我希望这可以帮助您更接近您想要的目标。

jquery插件方法和回调

4 个答案: