0

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

基本插件

(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");

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

感谢您的任何帮助。

4

4 回答 4

0

尝试

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

演示：小提琴

于 2013-08-23T23:56:06.290 回答
0

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

(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);

小提琴

这有点骇人听闻，但它确实有效。您也可以只返回this.map(function() {...总是返回一个数组等，或者阅读如何将多个参数传递给插件并做不同的事情等，而不是'getArray'上面使用的硬编码检查。

于 2013-08-23T23:42:27.673 回答
0

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

(function($) {
    $.fn.myPlugin = function() {
        var tagArray = [];
        this.each(function(){
            // add something to tagArray
        });
        return tagArray;
    }
})(jQuery);
于 2013-08-23T23:47:24.207 回答
0

我自己刚刚完成了一个 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();

我希望这可以帮助你更接近你想去的地方。

于 2013-08-24T00:24:06.470 回答