How to correctly implement option/update method in jquery plugin?

问题

I'm trying to create a plugin with ability to update options after initialization. I've started with simple plugin, which will help me to understand plugin's logic. So here it is:

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

As you can see, this plugin just show's alert message with defined text. Also, I have HTML page (where I include jquery library and this plugin) with 2 links:

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

I create an instance of 'clickAlert' plugin on link with "show" class. When I click on it, it shows default message as I expected. But I want (for example) to click on link with "change" class and update 'message' attribute of earlier created instance. BUT SOMETHING IS WRONG. My jquery code on HTML page:

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

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

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

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

        });

});
</script>

1) How to correctly implement option/update method in this jquery plugin?
2) I have one more question, but it's not related to main question. For example I will create plugin using this pattern. Besides init and option methods, plugin will have 10 more methods (for example) responsible for animation. In my init method I'll need to check, (using SWITCH statement) which animation method should I call and call it. Because I need to do this action more then one time, it's better to create one function in order to avoid code dublication. Where is the best place for creating function like this? Should I create it as a new method (like init, option and other animation methods) or I can simply create it in init's "return this.each()" function and also call it few times there?

回答1:

It is a question of scope, you need to change the scope of the options - normally you would not but in this case you do, so you change to modify the original options in the $.extend(, and give it a reference thus:

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

来源：https://stackoverflow.com/questions/14800095/how-to-correctly-implement-option-update-method-in-jquery-plugin