7.6 编写jQuery插件
7.6 编写jQuery插件
在前面几个章节中，已经介绍了jQuery的大部分的基本应用，同时也看到了一些不错的插件。这一节将介绍如何编写一个插件。
7.6.1 插件的种类
编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率。
jQuery的插件主要分为3种类型。
1．封装对象方法的插件
这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery 对象进行操作，是最常见的一种插件。
据不完全统计，95%以上的jQuery 插件都是封装对象方法的插件。此类插件可以发挥出jQuery选择器的强大优势。有相当一部分的jQuery的方法，都是在 jQuery脚本库内部通过这种形式“插”在内核上的，例如parent()方法、appendTo()方法和addClass()方法等不少DOM操作方法。
有不少用户对jQuery没有提供color()方法而表示遗憾，不得不用css(“color”)来代替。在后面的例子中将会讲解如何编写一个color()方法的jQuery插件。
2．封装全局函数的插件
可以将独立的函数加到 jQuery 命名空间之下。例如第1 章提到的解决冲突用的jQuery. noConflict()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等，都是 jQuery内部作为全局函数的插件附加到内核上去的。
3．选择器插件
个别情况下，会需要用到选择器插件。虽然 jQuery的选择器十分强大，但还是会需要扩充一些自己喜欢的选择器，例如用：color(red)来选择所有红色字的元素之类的想法。
7.6.2 插件的基本要点
- jQuery插件的文件名推荐命名为
jquery.[插件名].js，以免和其他JavaScript库插件混淆。例如命名为jquery.color.js。 - 所有的对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象本身上。
- 在插件内部，this指向的是当前通过选择器获取的jQuery对象，而不像一般的方法那样，例如click()方法，内部的this指向的是DOM元素。
- 可以通过this.each来遍历所有元素。
- 所有的方法或函数插件，都应当以分号结尾，否则压缩的时候可能出现问题。为了更稳妥些，甚至可以在插件头部先加上一个分号，以免他人的不规范代码给插件带来影响。具体方法可以参考后面的代码。
- 插件应该返回一个jQuery对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量，例如字符串或者数组等。
- 避免在插件内部使用$作为jQuery对象的别名，而应使用完整的jQuery来表示。这样可以避免冲突。当然，也可以利用闭包这种技巧来回避这个问题，使插件内部继续使用$作为jQuery的别名。很多插件都是这么做的，本书也会利用这种形式。
7.6.3 插件中的闭包
关于闭包，ECMAScript 对其进行了简单的描述：允许使用内部函数（即函数定义和函数表达式位于另一个函数的函数体内），而且，这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数，当其中一个这样的内部函数在包含它们的外部函数之外被调用时，就会形成闭包。即内部函数会在外部函数返回后被执行。而当这个内部函数执行时，它仍然必须访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明（最初时）的值是外部函数返回时的值，但也会受到内部函数的影响。
利用闭包的特性，既可以避免内部临时变量影响全局空间，又可以在插件内部继续使用$作为jQuery的别名。常见的jQuery插件都是以下这种形式的：
[插图]
首先定义一个匿名函数function(){/这里置放代码/}，然后用括号括起来，变成（function(){/这里置放代码/}）这种形式，最后通过()这个运算符来执行。可以传递参数进去，以供内部函数使用。
[插图]
上段代码是一种常见的jQuery插件的结构。
接下来看下面这段jQuery代码：
[插图]
这里只是简单地介绍了闭包的概念，显然闭包不是几句话就能讲清楚的。但对于插件的制作来说读者只需要知道所有的插件代码必须放置在下面这两句代码内就可以了。
[插图]
如果需要获取更多关于闭包的知识，读者可以自行查阅相关资料。
7.6.4 jQuery插件的机制
jQuery提供了两个用于扩展jQuery功能的方法，即jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展之前提到的3种类型插件中的第1种，后者用于扩展后两种插件。这两个方法都接受一个参数，类型为Object。Object 对象的“名/值对”分别代表“函数或方法名/函数主体”。具体内容将会在下面讲解。
jQuery.extend()方法除了可以用于扩展jQuery对象之外，还有一个很强大的功能，就是用于扩展已有的Object对象。
jQuery代码如下：
[插图]
用一个或多个其他对象来扩展一个对象，然后返回被扩展的对象。
例如合并settings对象和options对象，修改并返回settings对象。
[插图]
结果为：
[插图]
jQuery.extend()方法经常被用于设置插件方法的一系列默认参数，如下面的代码所示：
[插图]
如果用户调用foo()方法的时候，在传递的参数options对象中设置了相应的值，那么就使用设置的值，否则使用默认值。代码如下：
[插图]
通过使用jQuery.extend()方法，可以很方便地用传入的参数来覆盖默认值。此时，对方法的调用依旧保持一致，只不过要传入的是一个映射而不是一个参数列表。这种机制比传统的每个参数都去检测的方式不仅灵活而且更简洁。此外，使用命名参数意味着再添加新选项也不会影响过去编写的代码，从而使开发者使用起来更加直观明了。
7.6.5 编写jQuery插件
1．封装jQuery对象方法的插件
- 编写设置和获取颜色的插件。
首先介绍如何编写一个color()插件。该插件用于实现以下两个功能。
（1）设置匹配元素的颜色。
（2）获取匹配的元素(元素集合中的第1个)的颜色。
首先将该插件按规范命名为jquery.color.js。
然后在JavaScript文件里搭好框架，代码如下：
[插图]
由于是对jQuery对象的方法扩展，因此采用扩展第1类插件的方法jQuery.fn.extend()来编写，代码如下：
[插图]
这里给这个方法提供一个参数value，如果调用方法的时候传递了value这个参数，那么就是用这个值来设置字体颜色；否则就是获取匹配元素的字体颜色的值。
首先实现第1个功能，设置字体的颜色。
只需要简单地调用jQuery提供的css()方法，直接写成this.css(“color”，value)即可。注意，插件内部的this指向的是jQuery对象，而非普通的DOM对象。接下来要注意的是，插件如果不需要返回字符串之类的特定值，应当使其具有可链接性。为此，直接返回这个this对象，由于.css()方法也会返回调用它的对象，即此处的this，因此可以将代码写成：
[插图]
接下来实现第2个功能。如果没有给方法传递参数，那么就是获取集合对象中第1个对象的color的值。由于 css()方法本身就具有返回第1个匹配元素的样式值的功能，因此此处无需通过eq()来获取第1个元素。只要将这两个功能结合起来，判断一下value是否是undefined即可。
jQuery代码如下：
[插图]
此时color()插件的功能已经全部实现了，通过该插件可以获取和设置元素的color值。实际上， css()方法内部已经有判断value是否为undefined的机制，所以才可以根据传递参数的不同而返回不同的值。因此，可以借助css()方法的这个特性来处理该问题。删除if()部分，最终剩余的代码实际上与先前那一段是一样的。jQuery代码如下：
[插图]
这样一来，插件也就编写完成了。现在来测试一下该插件。
构建如下代码，并放入插件以及测试代码。
[插图]
运行代码后可以看到图7-23和图7-24所示的效果。
[插图]
[插图]
另外，如果要定义一组插件，可以使用如下所示写法：
[插图]
- 表格隔行变色插件
这里将第5 章的表格隔行变色的代码制作成一个插件，以便于重复使用。表格隔行变色的jQuery代码如下：
[插图]
首先把插件方法取名为alterBgColor，然后为该插件方法搭好框架，jQuery代码如下：
[插图]
框架完成后，接下来就需要为options定义默认值。默认构建这样（{odd: “odd”，even:” even”， selected:”selected”}）一个 Object。这样就可以通过$(“#sometable”).alterBgColor({odd: “odd”， even:”even”，selected:”selected”})自定义奇偶行的样式类名以及选中后的样式类名。同时，直接使用$(“#sometable”).alterBgColor()就可以应用默认的样式类名。
jQuery代码如下：
[插图]
如果在后面的程序中需要使用options对象中的属性，可以使用如下方式来获得：
[插图]
接下来就需要把这些值放到程序中，来代替先前程序中的固定值。
最后就是匹配元素的问题了。显然不能直接用$('tbody>tr')选择表格行，这样会使页面中全部的<tr>元素都隔行变色。应该使用选择器选中某个表格，执行alterBgColor()方法后，将对应的表格内<tr>元素进行隔行变色。因此，需要把所有通过$('tbody>tr')选择的对象改写成$('tbody>tr',this)，表示在匹配的元素内（当前表格内）查找，并应用上一步中的默认值。jQuery代码如下：
[插图]
在代码的最后，返回this，让这个插件具有可链性。
此时，插件就完成了。现在来测试这个插件。构造两个表格，id分别为table1和table2，然后使用其中一个<table>调用alterBgColor()方法，以便查看插件是否能独立工作，并且具有可链性。
jQuery代码如下：
[插图]
从图7-25可以看到，第1个表格没有变化，第2个表格不仅隔行变色，同时表格头部的<th>标签的字体颜色变为红色。
[插图]
需要注意的是，jQuery的选择符可能会匹配1个或多个元素。因此，在编写插件时必须考虑到这些情况。可以在插件内部调用each()方法来遍历匹配元素，然后执行相应的方法，this会依次引用每个DOM元素。如下jQuery代码所示：
[插图]
2．封装全局函数的插件
这类插件是在 jQuery 命名空间内部添加一个函数。这类插件很简单，只是普通的函数，没有特别需要注意的地方。
例如新增两个函数，用于去除左侧和右侧的空格。虽然jQuery已经提供了jQuery.trim()方法来去除两端空格，但在某些情况下，会只希望去除某一侧的空格。
去除左侧、右侧的空格的函数分别写成如下jQuery代码：
[插图]
- (text || “”)部分是用于防止传递进来的text这个字符串变量处于未定义之类的特殊状态。如果text是undefined，则返回字符串””，否则返回字符串text。这个处理是为了保证接下来的字符串替换方法replace()方法不会出错。
- 运用了正则表达式替换首末的空格。
函数写完之后，就可以放到jQuery命名空间之下。代码很简单，而且可以批量完成。
首先构建一个 Object 对象，把函数名和函数都放进去，其中的名/值对分别为函数名和函数主体，代码如下：
[插图]
然后，利用jQuery.extend()方法直接对jQuery对象进行扩展。
jQuery代码如下：
[插图]
现在，把代码放到HTML页面中看看有什么效果。代码如下：
[插图]
运行代码后，效果如图7-26所示。
[插图]
文本框中第1行的字符串左右两侧的空格都被删除。
第2行的字符串只有左侧的空格被删除。
第3行的字符串只有右侧的空格被删除。
到这里，第2 种类型的插件就编写完了。该插件只是给 jQuery对象加上两个简单的函数用于去除左侧或者右侧的空格。
3．自定义选择器
jQuery 以其强大的选择器著称，但这并不表示其选择器已经尽善尽美。有时候Web 开发者希望有一些更强大的选择器。
jQuery 提供了一套方法让用户可以通过制作选择器插件来使用自定义选择器，从而使 jQuery的选择器功能更加完善。
jQuery的选择符解析器首先会使用一组正则表达式来解析选择器，然后针对解析出的每个选择符执行一个函数，称为选择器函数。最后根据这个选择器函数的返回值为true还是 false 来决定是否保留这个元素。这样就可以找到匹配的元素节点。
下面是一个选择器例子：
[插图]
该选择器首先会获取所有的<div>元素，然后隐式遍历这些<div>元素，并逐个将这些<div>元素作为参数，连同括号里的“1”等一些参数（具体见下文）一起传递给gt对应的选择器函数进行判断。如果这个函数返回true，则这个<div>元素保留，如果返回false，则不保留这个<div>元素。这样得到的结果就是一个符合要求的<div>元素的集合。
:gt()选择器在jQuery源文件中的代码如下：
[插图]
其中，选择器的函数一共接受3个参数，代码如下：
[插图]
第1个参数为a，指向的是当前遍历到的DOM元素。
第2个参数为i，指的是当前遍历到的DOM元素的索引值，从0开始。
第3个参数m最为特别，它是由jQuery正则解析引擎进一步解析后的产物（用match匹配出来的），是一个数组。
m[0]，以上面的$("div:gt(1)")这个例子来讲，是:gt（1）这部分。它是jQuery选择器进一步将要匹配的内容。m[1]，这里是选择器的引导符，匹配例子中的“:”，即冒号。并非只能使用＂:＂后面跟上选择器，用户还可以自定义其他的选择器引导符。m[2]，即例子中的gt，确定究竟是调用哪个选择器函数。m[3]，即例子中括号里的数字“1”，它非常有用，是编写选择器函数最重要的一个参数。m[4]，上面的例子中没有体现出来，这个比较罕见。例如”div :l(ss(dd))”这样一个选择器中，m[4]就指向了（dd）这部分，注意是带括号的（dd），而不只是dd。同时要注意，此时的m[3]的值是ss(dd)而非ss。
jQuery已经提供了lt、gt和eq等选择器，但却没有提供l（e 小于等于）、g（e 大于等于）和between （两者之间）之类的选择器。
接下来，介绍如何编写一个 between 选择器。例如使用$("div:between(2，5)")能实现获取索引值为3、4元素的功能。
首先构建选择器函数。
jQuery代码如下：
[插图]
函数解释如下。
第1行，将传递进来的m[3]以逗号为分隔符，转成一个数组。m[3]此时的值应该是“2,5”，是一个字符串。随后放入临时变量tmp中待用。
第2行，直接将得到的2和5与i进行比较，i大于2并且小于5的元素都将得以保留。注意，此处用了一个小技巧，通过tmp[0]-0将本来的“2”这个字符串转换成了数字2，然后再与i进行比较。
接下来，将这个函数扩展成jQuery的选择器。
jQuery代码如下：
[插图]
这里再次利用 jQuery.extend()方法来对 jQuery 对象的一部分进行扩展。选择器仅仅是jQuery.expr[":"]对象的一部分，同时也是一个 Object 对象，因此可以直接利用 jQuery.extend()对其进行扩展。
最后就可以把选择器放入页面中来选取元素了，构建如下代码：
[插图]
显示图7-27和图7-28所示的界面。
[插图]
[插图]
在图7-28中，索引为3和4的行的背景颜色变成了白色，达到了预期的效果。
至此，选择器插件编写完了。
选择器插件中的函数属于运算密集型函数，对执行效率要求很高，读者在编写此类插件的时候，一定要秉承优化再优化的原则，千万不要随便写一个能实现功能的函数就草草了事。