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

問題は、実際に出力するoptionsと、openl両方のセレクターwidthに 600 の設定が表示されることです。

最近まで、私は要素データタグに要素固有の情報を保存し$(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 に答える