2

初期化後にオプションを更新できるプラグインを作成しようとしています。プラグインのロジックを理解するのに役立つ単純なプラグインから始めました。だからここにあります：

;(function($) {

    var defaults = {
        message: 'This is default message'
    };

    var options = {};

    var methods = {
        init : function( options ) { 
            options = $.extend(defaults, options);

            return this.each(function() {

                $(this).click(function(){
                    alert(options.message);
                });

            });
        },

        option: function( key, value ){
                    if (val) {
                        options[key] = val;
                    } else {
                        return options[key];
                    }
                }
        };  

    $.fn.clickAlert = function( method ) {
        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 {
            //some error that method doesnt exist
        }    
    };

})(jQuery);

ご覧のとおり、このプラグインは、定義されたテキストを含むアラート メッセージを表示するだけです。また、2 つのリンクを含む HTML ページ (jquery ライブラリとこのプラグインを含む場所) があります。

<a href="#" class="show">SHOW ALERT</a>
<a href="#" class="change">CHANGE ALERT MESSAGE</a>

「show」クラスとのリンクで「clickAlert」プラグインのインスタンスを作成します。クリックすると、期待どおりにデフォルトのメッセージが表示されます。しかし、（たとえば）「変更」クラスのリンクをクリックして、以前に作成したインスタンスの「メッセージ」属性を更新したい。しかし、何かが間違っています。HTMLページの私のjqueryコード：

<script type="text/javascript">
jQuery(document).ready(function($) {

        $('.show').clickAlert();

        $('.change').click(function(){

            $('.show').clickAlert('option', 'message', 'Updated message');

        });

});
</script>

1) この jquery プラグインでオプション/更新メソッドを正しく実装するには?
2) もう 1 つ質問がありますが、主な質問とは関係ありません。たとえば、このパターンを使用してプラグインを作成します。init メソッドとオプション メソッドに加えて、プラグインにはアニメーションを担当する (たとえば) 10 個のメソッドがあります。私の init メソッドでは、(SWITCH ステートメントを使用して) どのアニメーション メソッドを呼び出す必要があるかを確認する必要があります。このアクションを複数回実行する必要があるため、コードの重複を避けるために、1 つの関数を作成することをお勧めします。このような関数を作成するのに最適な場所はどこですか? 新しいメソッド (init、option、およびその他のアニメーション メソッドなど) として作成する必要がありますか?それとも、単に init の "return this.each()" 関数で作成し、そこで数回呼び出すこともできますか?

4

1 に答える 1

3

これはスコープの問題です。オプションのスコープを変更する必要があります。通常は変更しませんが、この場合は変更するため、変更して の元のオプションを変更し、次のよう$.extend(に参照を与えます。

;(function ($) {

    var self = this;
    self.defaults = {
        message: 'This is default message'
    };
    self.options = {};
    var methods = {
        init: function (options) {
            options = $.extend(self.options, self.defaults, options);
            return this.each(function () {
                $(this).click(function () {
                    alert(options.message);
                });
            });
        },
        option: function (key, myvalue) {
            if (myvalue) {
                self.options[key] = myvalue;
            } else {
                return self.options[key];
            }
        }
    };
    $.fn.clickAlert = function (method) {
        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 {
            //some error that method doesnt exist
        }
    };
})(jQuery);
jQuery(document).ready(function ($) {
    $('.show').clickAlert();
    $('.change').click(function () {
        $('.show').clickAlert('option', 'message', 'Updated message');
    });
});
于 2013-03-04T23:14:47.540 に答える