Question

我的代码如下：

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

问题是当我在options中输出openl时，实际上两个选择器都显示width设置为600.

直到最近，我在元素数据标记$(this).data('prodigal', options)上存储了元素特定信息，然后在我创建的每个函数中访问了这些数据，以便openl在顶部有一行，如下所示： options = $(this).data('prodigal')。

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

我是否还应该尝试将我的设置存储在我的元素数据标记中，或者是否有关于构建jQuery插件的缺失？如何管理插件中的设置？

以前我搜索过的主题似乎没有明确涵盖这一点。

Answer 1

在某种程度上回答这个问题，正如@Matt所说：

在data（）中存储选项是常用方法。

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

这个问题的原因是因为，在野外，我看到很多插件都是以多种方式创建的。

由于评论有点链接：Difference in $.extend calls in a plugin?我已经能够掌握一套“好”的设计模式，我可以用它来满足我的需求（不在文档中）：http://jqueryboilerplate.com/由@Marcus在链接评论中提供。

如何在jquery插件中使用元素特定的设置？

1 个答案: