推荐一款jQuery插件模板

  我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin)。我尝试过用不同的方式去写,现在这个模板是我最喜欢的:

  

复制代码 代码如下:

  ;(function($) {

  // multiple plugins can go here

  (function(pluginName) {

  var defaults = {

  color: 'black',

  testFor: function(div) {

  return true;

  }

  };

  $.fn[pluginName] = function(options) {

  options = $.extend(true, {}, defaults, options);

  return this.each(function() {

  var elem = this,

  $elem = $(elem);

  // heres the guts of the plugin

  if (options.testFor(elem)) {

  $elem.css({

  borderWidth: 1,

  borderStyle: 'solid',

  borderColor: options.color

  });

  }

  });

  };

  $.fn[pluginName].defaults = defaults;

  })('borderize');

  })(jQuery);

  //下面是用法

  $('div').borderize();

  $('div').borderize({color: 'red'});

  以下是我喜欢这种模板的原因

  1. 你仍然可以访问里面的默认选项,即便它被重写了(简单地通过父属性的访问)

  2. 通过修改pluginName即可更改插件的名字。(这种方式对代码压缩也非常有利)

  第#1点非常强大,比如说我们希望复写这个方法,但是仍然希望保留原来的方法,我们可以看下面的例子:

  

复制代码 代码如下:

  $('.borderize').borderize({

  testFor: function(elem) {

  var $elem = $(elem);

  if (elem.is('.inactive')) {

  return false;

  } else {

  // calling "parent" function

  return $.fn.borderize.defaults.testFor.apply(this, arguments);

  }

  }

  });

  We can even do this with regular properties like this

  var someVarThatMayBeSet = false;

  /* code ... */

  $('.borderize').borderize({

  color: someVarThatMayBeSet ? 'red' : $.fn.borderize.defaults.color

  });

  小伙伴们,你们也会喜欢上这款jQuery插件模板的吧,他实在是太灵活了。