(function($) { var methods = { init: function(options) { // 在每个元素上执行方法 return this.each(function() { var $this = $(this); // 创建一个默认设置对象 var defaults = { propertyName: 'value', onSomeEvent: function() {} } // 使用extend方法从options和defaults对象中构造出一个settings对象 var settings = $.extend({}, defaults, options); // 执行代码 }); } }; $.fn.pluginName = function() { var method = arguments[0]; if(methods[method]) { method = methods[method]; // 我们的方法是作为参数传入的，把它从参数列表中删除，因为调用方法时并不需要它 arguments = Array.prototype.slice.call(arguments, 1); } else if( typeof(method) == 'object' || !method ) { method = methods.init; } else { $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' ); return this; } // 用apply方法来调用我们的方法并传入参数 return method.apply(this, arguments); } })(jQuery);
正如上面所示，一个“options”参数被添加到方法当中，和“arguments”也被添加到了主函数中。如果一个方法已经被声明，在参数传入方法之前，调用那个方法的参数会从参数列表中删除掉。我用了“apply（）”来代替了“call（）”，“apply（）”本质上是和“call（）”做着同样的工作的，但不同的是它允许参数的传入。这种结构也允许多个参数的传入，如果你愿意这样做，你也可以为你的方法修改参数列表，例如：“init:function(arg1, arg2){}”。
如果你是使用JS对象作为参数传入，你可能需要定义一个默认对象。一旦默认对象被声明，你可以使用“$.extend”来合并参数对象和默认对象中的值，以形成一个新的参数对象来使用（在我们的例子中就是“settings”）；
这里有一些例子，用来演示以上的逻辑：
var options = { customParameter: 'Test 1', propertyName: 'Test 2' } var defaults = { propertyName: 'Test 3', onSomeEvent: 'Test 4' } var settings = $.extend({}, defaults, options); /* settings == { propertyName: 'Test 2', onSomeEvent: 'Test 4', customParameter: 'Test 1' } */
保存设置：添加持久性数据
有时你会想在你的插件中保存设置和信息，这时jQuery中的“data（）”函数就可以派上用场了。它在使用上是非常简单的，它会尝试获取和元素相关的数据，如果数据不存在，它就会创造相应的数据并添加到元素上。一旦你使用了“data（）”来为元素添加信息，请确认你已经记住，当不再需要数据的时候，用“removeData（）”来删除相应的数据。
(function($) { var privateFunction = function() { // 执行代码 } var methods = { init: function(options) { // 在每个元素上执行方法 return this.each(function() { var $this = $(this); // 尝试去获取settings，如果不存在，则返回“undefined” var settings = $this.data('pluginName'); // 如果获取settings失败，则根据options和default创建它 if(typeof(settings) == 'undefined') { var defaults = { propertyName: 'value', onSomeEvent: function() {} } settings = $.extend({}, defaults, options); // 保存我们新创建的settings $this.data('pluginName', settings); } else { / 如果我们获取了settings，则将它和options进行合并（这不是必须的，你可以选择不这样做） settings = $.extend({}, settings, options); // 如果你想每次都保存options，可以添加下面代码： // $this.data('pluginName', settings); } // 执行代码 }); }, destroy: function(options) { // 在每个元素中执行代码 return $(this).each(function() { var $this = $(this); // 执行代码 // 删除元素对应的数据 $this.removeData('pluginName'); }); }, val: function(options) { // 这里的代码通过.eq(0)来获取选择器中的第一个元素的，我们或获取它的HTML内容作为我们的返回值 var someValue = this.eq(0).html(); // 返回值 return someValue; } }; $.fn.pluginName = function() { var method = arguments[0]; if(methods[method]) { method = methods[method]; arguments = Array.prototype.slice.call(arguments, 1); } else if( typeof(method) == 'object' || !method ) { method = methods.init; } else { $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' ); return this; } return method.apply(this, arguments); } })(jQuery);
在上面的代码中，我检验了元素的数据是否存在。如果数据不存在，“options”和“default”会被合并，构建成一个新的settings，然后用“data（）”保存在元素中。
您可能感兴趣的文章: