1

我的代码如下所示：

(function($, window, undefined){
    var options, methods = {
        init : function(opts){

            options = $.extend({}, {
                width   : 800,
                height  : 600,
            }, opts);

            return this.each(function(){
                data = $(this).data('prodigal');
                if(!data){
                    $(this).data('prodigal', options).on('click', openl);
                }
            });
        },
    },
    openl = function(){
        console.log(options);
    };


    $.fn.prodigal = function(method) {
        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.prodigal' );
        }
    };
})(jQuery)

我称之为：

$('.view_title_images').prodigal({width: 500});
$('.glglg').prodigal({ width: 600 });

问题是当我输出optionsin时，openl我实际上得到的两个选择器都显示了width600 的设置。

直到最近，我将元素特定信息存储在元素数据标签上：$(this).data('prodigal', options)然后在我创建的每个函数中访问该数据，这样openl顶部就会有一行：options = $(this).data('prodigal').

我确实尝试使用公共方法，但我似乎无法$(this).data('prodigal', options).on('click', openl);在行中绑定这些公共方法，它不断产生错误。

我是否还应该尝试将我的设置存储在我的元素数据标签中，或者我在构建 jQuery 插件时缺少什么？如何管理插件中的设置？

我搜索过的以前的主题似乎没有清楚地涵盖这一点。

4

1 回答 1

1

正如@Matt 所说，要在一定程度上回答这个问题：

在 data() 中存储选项是常用的方法。

我现在意识到我没有做错任何事。

提出这个问题的原因是，在野外，我看到了许多以多种方式创建的插件。

由于某种链接的评论：插件中 $.extend 调用的差异？我已经掌握了一组“好的”设计模式，可以用来满足我的需求（不在文档中）：http: //jqueryboilerplate.com/由@Marcus 在链接中提供评论。

于 2012-12-10T10:31:52.057 回答