总结jQuery插件开发中的一些要点

基础
1、jQuery插件开发主要使用如下两个方法：
1.1、添加静态方法

jQuery.extend(object);

为扩展jQuery本身，为类添加新的方法，可以理解文添加静态方法。

$.extend({ 　　addMethod : function(a, b){return a + b;}  // $.addMethod(1, 2); //return 3});

1.2、添加成员方法

jQuery.fn.extend(object);jQuery.fn = jQuery.prototype

给jQuery对象添加方法，对jQuery.prototype进行扩展，为jQuery类添加成员方法：

$.fn.extend({   getInputText:function(){     $(this).click(function(){       alert($(this).val());     });   } });$("#username").getInputText();

2、一个通用的框架：
以下是一个通用的框架：

(function($){   $.fn.yourPluginName = function(options){     //各种属性和参数     var options = $.extend(defaults, options);     this.each(function(){       //插件的实现代码    });   }; })(jQuery);

关于

$.extend(defaults, options);

就是通过合并defaults和options来扩展defaults，实现插件默认参数的功能。

实践

1、声明插件名称：
添加一个函数到jQuery.fn（jQuery.prototype）对象，该函数的名称就是你的插件名称：

jQuery.fn.myPlugin = function() { // Do your awesome plugin stuff here};

在命名不与jQuery其他函数冲突的情况，可以使用闭包的方式使用$符号：

(function( $ ) { $.fn.myPlugin = function() {  // Do your awesome plugin stuff here };})( jQuery );

2、插件中的上下文：
jQuery接收一个回调，该回调本身就指向了dom，直接使用this就相当于我们平时的$(this)的情况：

(function( $ ){ $.fn.myPlugin = function() {  // there's no need to do $(this) because  // "this" is already a jquery object  // $(this) would be the same as $($('#element'));  this.fadeIn('normal', function(){   // the this keyword is a DOM element  }); };})( jQuery );$('#element').myPlugin();

下面是一个简单的jQuery插件，实现获取所有div的最大高度：

(function( $ ){ $.fn.maxHeight = function() {  var max = 0;  this.each(function() {   max = Math.max( max, $(this).height() );  });  return max; };})( jQuery );var tallest = $('div').maxHeight(); // Returns the height of the tallest div

3、维护链接性：
前面的示例返回一个整数值最高的div，但是通常的意图仅在某种程度上是仅修改插件的元素集合,并将它们传递到下一个链中的方法。这样的jQuery的设计优雅的地方。所以保持链接性放到一个插件,您必须确保您的插件返回这个关键字。