如何正确实施jQuery插件选项/更新的方法？ [英] 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);

正如你所看到的，这个插件只显示与定义的文本警报消息。
另外，我有HTML页面（即我包括jQuery库和这个插件）与2链接：

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>

我创建的clickAlert与秀类链接插件的实例。当我点击它，它显示了如我所料默认的消息。但我想（比如说）点击与变级和更新先前创建实例的消息属性的链接。但什么是错的。 HTML网页上的我的jQuery code：

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）如何正确地实施这个jQuery插件选项/更新的方法？

2）我有一个问题，但它没有涉及到的主要问题。例如，我将使用这种模式创建插件。除了init和选择方式，插件将有10多个方法（例如）负责​​动画。在我的init方法，我需要检查，（使用switch语句），该动画的方法我应该叫并调用它。因为我需要做这个动作的一个以上的时间，最好以避免code dublication创建一个功能。哪里是像这样创建功能的最佳地点？我应该创建它作为一种新的方法（如初始化，选择权和其他动画的方法），或者我可以简单地在init的创建回归this.each（）函数，并调用它几次呢？

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?

推荐答案

有范围的问题，您需要更改的选项的范围 - 通常你不会，但在这种情况下，你做的，所以你改变修改原方案中的 $扩展（，从而给它一个参考：

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

这篇关于如何正确实施jQuery插件选项/更新的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！