老司机带你解读jQuery插件开发流程(4)

(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()”保存在元素中。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzpfwy.html