0

我开始了解更多关于 jQuery 插件模式的信息，但我遇到了一些问题。请参阅下面的代码。我想使用 onclick 功能访问我的插件选项/默认值，但我不确定如何。

function SomePlugin(element,options)
{
    this.$el = $(element);

    this.options = $.extend({},
    {
        button: '#button',
        someVariable:'fuu',
        anotherVariable:'bar'

    },options);

    this.init();
}

SomePlugin.prototype =
{
    init:function()
    {
        var button = this.$el.find(this.options.button)

        button.on('click', this.onClick);
    },
    onClick: function(event){
        // Need to access the options (someVariable, anotherVariable) here... how?
    }
};


$.fn.somePlugin = function(options)
{
    return this.each(function()
    {
        if( !$.data(this,'somePlugin') )
        {
            $.data(this,'somePlugin',new SomePlugin(this,options));
        }
    });
};

我已经尝试了下面的代码，但是由于某种原因感觉不对。有没有更好的办法？另外，您对我的插件结构有任何其他建议或提示，请告诉我。顺便说一句，为了便于阅读，我省略了 jQuery 包装器

function SomePlugin(element,options)
{
    this.el = element;
    this.$el = $(element);

    this.options = $.extend({},
    {
        button: '#button',
        someVariable:'fuu',
        anotherVariable:'bar'

    },options);

    this.init();
}

SomePlugin.prototype =
{
    init:function()
    {
        var button = this.$el.find(this.options.button)

        button.on('click', {instance:this}, this.onClick);
    },
    onClick: function(event){
        // Options can be accessed using event.data.instance.options ... is there an easier way?
    }
};


$.fn.somePlugin = function(options)
{
    return this.each(function()
    {
        if( !$.data(this,'somePlugin') )
        {
            $.data(this,'somePlugin',new SomePlugin(this,options));
        }
    });
};
4

2 回答 2

1

当我想学习写作或理解插件时，我使用了 jeffery way tuts 并且它确实有效。值得一看。试试下面的链接

https://tutsplus.com/lesson/head-first-into-plugin-development/

于 2013-03-21T09:59:52.973 回答
0

我已经回答了我自己的问题。诀窍是像这样使用 jQuery 的 $.proxy() 方法：

button.on('click', $.proxy(this.onClick), this);

并引用单击的按钮（因为“this”现在指的是 SomePlugin 类）：

onClick: function(event){
    // This now refers to SomePlugin class, yay!
    // Use event.target instead of this to refer to the clicked element
    $(event.target).text(this.options.someVariable); 
}
于 2013-03-22T14:13:07.697 回答