深入浅出JQuery (四) 怎么自己开发 plugin 详解

1. 简介
   1. 通俗的理解插件就是为了完成某一项功能而存在的，叫它插件可以理解为即插即用的一件东西，它的目的是给已经有的函数或者方法做一个封装，来完成特定功能。
   2. 比如最近很火的抢票插件等等，打个比方好比是初中数学中很多函数，如正函数、余弦函数等组合在一起，形成一个新的函数，完成一个更复杂的功能而开发出来的聚合函数。

2. 种类
   1. 封装对象方法
      1. 将用JQuery选择器获取的对象的方法进行封装,可以说绝大部分都是属于这一类插件,包括我们平时经常场用到的一些方法,例如:appendTo()等等。
      2. 下面,我会通过做一个给表格隔行变色的插件,作为例子来学习这类插件如何做。

2. 封装全局函数
   1. 这类是将函数置于JQuery命名空间之下,而不是某一个对象上,作用于比较广泛,显然,我们可以看出这类函数主要是为了解决所有对象遇到的问题,或者不同库之间的问题而存在的,比如:为所有对象所调用的去空格函数$.trim()，解决不同库之间冲突的jQuery.noConflict()等

3. 选择器插件
   1. 虽然,JQuery的选择器已经很强大,但也可以编辑自己的选择器,供自己特殊需要时用到.

3. 书写格式

   1. 	//插件编写
      	;(function($) {
      		$.fn.extend({
      
      		//在此处写插件代码			
      		});
      	})(jQuery);
      

4. 插件机制
   1. jQuery.fn.extend()
      1. 用于扩展前面提到的第一种,兑现方法,比较常用.
   2. jQuery.extend()
      1. 用于扩展后两种
      2. 除了可以扩展增加jquery对象外，还可以扩展已经有的jquery对象

5. 例子
   1. 表格隔行变色插件，效果如下：
   2. 
   3. 代码如下

   4. // JavaScript Document
      //格式头
      ;(function($){
      	//封装对象方法
      	$.fn.extend({
      			//自定义函数
      			"ChangeLineColor":function(options){
      				//设置默认值,即给默认参数赋值
      				options=$.extend({
      					odd:"odd",		 
      					even:"even",			 
      					selected:"selected"			 
      				},options);
      				
      			//查找到的所有表格行，this指的是当前表格
      			$("tbody tr:odd",this).addClass(options.odd);
      			$("tbody tr:even",this).addClass(options.even);
      			//单击当前表格时变色，也可以是鼠标滑过等
      			$("tbody tr",this).click(function(){
      					//判断当前行是否选中
      					var hasSelected=$(this).hasClass(options.selected);
      					//如果选中，增加Selected,没选中去掉Selected
      					$(this)[hasSelected?"removeClass":"addCLass"](options.selected)
      						.find(':checkbox').attr("checked",!hasSelected);
      					
      			});
      			//如果单选框默认是选择的，则高亮
      			$('tbody>tr:has(:checkbox)',this).addClass(options.selected);
      			
      			//返回this.使得方法可以链接
      			return this;
      			}				 
      	});	   
      })(jQuery);

   5. 命名 自己定义插件就一定要按着规定命名，格式为jquery.[自定义].js,上面插件可以命名为jquery.color.js
   6. 使用，通普通jquery库方法使用相同，如下

   7. <script type="text/javascript" src="jquery.color.js"></script>
      <script type="text/javascript">
      	$(function(){
      		$("#table2").ChangeLineColor();
      	});
      </script>

      
      
      

6. 应用
   1. 插件发展趋势正在逐年上升,这一点从我们常用的开发工具就可以看出来,比如从以前集成编译环境

到现在可以自定义很多插件,根据自己需要选择,比如Visual Studio、Office、Eclipse含有大量的插件在里面,因为他是开源的的，所以众多的爱好者，开发出了让人应接不暇的插件。

2. 插件开发发展这么快,说到根源上也是为用户考虑,提高用户体验度
   1. 他为应用程序的功能扩展提供的无限的想象空间。一个应用程序，无论你前期做了多少的市场调查，需求分析做的多么完美，你也只是迎合一部分人的期望，更甚，你只迎合了一部分人的一部分期望，或者一部分人在某一时间的一部分期望。

3. 它遵循设计模式原则:依赖倒转原则
   1. 抽象不应该依赖于细节;高层模块不应该依赖于底层模块.
   2. 一种插件不应噶依赖于特定应用程序,也就是说,,没有你插件,我也可以很好的运行.
   3. 应用程序应该以一种策略获取插件，很多是以注册表方式来注册到应用程序里面，可能还有很多更好的方式。

7. 插件已经越来越重要
   1. 以后开发应用程序应该重视插件的开发和使用，提高程序开发效率，提高用户体验度。

1楼waf116前天 17:53

不错的文章，addCLass写错了一个字符

Re: lilongsheng1125前天 18:46

回复waf116n多谢指正……