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

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

;(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个链接：

 SHOW ALERT CHANGE ALERT MESSAGE 

我在“show”类的链接上创建了一个’clickAlert’插件实例。 当我点击它时，它显示我预期的默认消息。 但我希望（例如）点击“更改”类的链接并更新先前创建的实例的“消息”属性。 但有些错误。 我在HTML页面上的jquery代码：

  jQuery(document).ready(function($) { $('.show').clickAlert(); $('.change').click(function(){ $('.show').clickAlert('option', 'message', 'Updated message'); }); });  

1）如何在这个jquery插件中正确实现选项/更新方法？
2）我还有一个问题，但它与主要问题无关。 例如，我将使用此模式创建插件。 除了init和option方法之外，插件还有10个方法（例如）负责动画。 在我的init方法中，我需要检查（使用SWITCH语句）我应该调用哪个动画方法并调用它。 因为我需要多次执行此操作，所以最好创建一个函数以避免代码发布。 创建这样的function的最佳位置在哪里？ 我应该将它创建为一个新方法（如init，option和其他动画方法），或者我可以在init的“return this.each（）”函数中创建它并在那里调用几次？

Answer 1

这是一个范围问题，你需要改变选项的范围 – 通常你不会，但在这种情况下你会这样做，所以你改变修改$.extend(的原始选项$.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'); }); });