当前位置:嗨网首页>书籍在线阅读

17-解决方案

  
选择背景色: 黄橙 洋红 淡粉 水蓝 草绿 白色 选择字体: 宋体 黑体 微软雅黑 楷体 选择字体大小: 恢复默认

12.4.2 解决方案

选项最好通过选项对象传递到自定义插件方法中。使用一个选项对象传递参数能够生成更清晰,更容易使用的代码,并且为将来提供更好的灵活性。

当允许插件使用选项时,提供合理的默认值是明智的。提供合理的默认值之后,插件为用户提供覆盖默认值的方法也很重要。通过声明默认选项对象,以用户提供的选项和jQuery extend() 方法覆盖默认选项,就很容易实现上述两个目标,然后可以在代码中利用这些选项:

jQuery.fn.pulse = function(options) {
  //合并传入的选项和默认选项
  var opts = jQuery.extend({}, jQuery.fn.pulse.defaults, options);
return this.each(function() {
  // 跳动!
  for(var i = 0;i<opts.pulses;i++) {
   jQuery(this).fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh);
  }
   //重置为正常值
   jQuery(this).fadeTo(opts.speed,1);
  });
};
// 跳动插件默认选项
jQuery.fn.pulse.defaults = {
  speed: "slow",
  pulses: 2,
  fadeLow: 0.2,
  fadeHigh: 1
};

通过指定选项的默认值,使用插件的开发人员在调用函数时就可以提供尽可能少的选项。在定义了插件入口方法之后放置选项默认值很重要;否则,你将会碰到一个错误:

// 仅覆盖一个选项
jQuery('p').pulse({pulses: 6});
// 覆盖所有选项
jQuery('p').pulse({speed: "fast", pulses: 10, fadeLow: 0.3, fadeHigh: 0.8});

最后,将选项指定为插件函数中作为子插件函数附加的对象,默认选项在项目中只能覆盖一次。开发人员以后可以指定自己的默认选项组,最大限度地减少获得想要的行为时必须的代码量:

// 上面包含插件代码
// 重置默认跳动选项
jQuery.fn.pulse.defaults = {
  speed: "fast",
  pulses: 4,
  fadeLow: 0.2,
  fadeHigh: 1
};
//在这个调用中将使用新的默认值
jQuery('p').pulse();