如何在 jquery 插件中正确实现选项/更新方法？答案

【问题标题】：How to correctly implement option/update method in jquery plugin?如何在 jquery 插件中正确实现选项/更新方法？
【发布时间】：2013-02-10 16:53:01
【问题描述】：

我正在尝试创建一个能够在初始化后更新选项的插件。我从简单的插件开始，这将帮助我理解插件的逻辑。所以这里是：

;(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）我还有一个问题，但它与主要问题无关。例如，我将使用这种模式创建插件。除了 init 和 option 方法外，插件还有 10 个（例如）负责动画的方法。在我的 init 方法中，我需要检查（使用 SWITCH 语句）我应该调用哪个动画方法并调用它。因为我需要多次执行此操作，所以最好创建一个函数以避免代码重复。创建这样的功能的最佳位置在哪里？我应该将它创建为一个新方法（如 init、option 和其他动画方法）还是可以简单地在 init 的“return this.each()”函数中创建它并在那里调用几次？

【问题讨论】：

在这里查看一些好的建议：addyosmani.com/resources/essentialjsdesignpatterns/book/…
@Mark-schultheiss ，这不是建议，只是另一篇关于模式的文章......但我选择了一篇，但它不起作用，问题是“为什么？”
请注意，我提供了该页面作为参考，因为我相信您想要更改默认值的 jQuery 插件有更好的模式 - 模式是很好的模式，而不仅仅是文章和模式选择可以根据目标对您的努力产生积极影响。识别模式是您所追求的。

标签： jquery jquery-plugins attributes options

【解决方案1】：

这是范围的问题，您需要更改选项的范围-通常您不会但在这种情况下您会这样做，因此您更改以修改$.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');
    });
});

【讨论】：