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 に答える