jQuery是当前最为流行的JavaScript库，许多网站使用它来实现一些动态效果和Ajax功能。然而，很少的开发者会深入去研究插件的开发。
在这篇教程里，我们将会创建一个简单的插件来解释一些基础。这个插件的作用是将一个或者多个选择的节点的文本翻转（示例页面）。
为什么要创建jQuery插件？
总而言之，一个词：重用。通过扩展jQuery，你可以创建一个可以在其他任何网页上使用的可重用组件。你的代码会被封装起来，减少了在其他地方函数名冲突的风险。
jQuery的工作原理
jQuery传递DOM元素或者一个包含CSS选择器的字符串到其核心函数，然后返回一个jQuery对象，这个对象是一个类似数组的DOM节点集合。这些节点关联了一个或者多个的方法。例如：
// color all <p> tags red
$("p").css("color", "red");
注意：虽然jQuery库的名字是"jQuery"，但是它提供了一个快捷的变量"$"来引用它。需要注意的是，其他的JS库也有可能会使用"$"。
jQuery插件的工作原理
jQuery允许添加方法到它的库里。当这些方法被调用的时候，jQuery对象会被传递过去。DOM节点可以根据需要随意操作，同时方法应该返回"this"以便链式调用其他的方法。
我们的示例插件会以以下的形式调用：
// reverse the text in all <p> tags
$("p").reverseText();
我们还会增加两个可选的参数，minlenght和maxlength。当这两个参数被使用的时候，字符串的长度必须在这两个参数的值之间翻转才会发生。
插件的声明
插件的定义使用到了jQuery的fn方法，例如：
jQuery.fn.reverseText = function(params) { ... };
之所以使用"jQuery"而不是"$"是想确保不会跟其他的JS库冲突。我们所有的内部代码也都应该这样。但是，我们可以通过使用匿名方法（anonymous function）来帮我们少打几个字和减少文件的大小：
(function($) {
$.fn.reverseText = function(params) { ... };
})(jQuery);
这个函数会立刻被执行，它传递jQuery作为一个命名为"$"的参数。因为"$"是局部变量，所以我们可以假定它一直作为jQuery的引用而不是其他库的一个全局变量。
插件参数
我们为我们的插件设置两个参数：minlength和maxlenght。最简单的方法是把它们作为函数的变量，例如：
(function($) {
$.fn.reverseText = function(minlength, maxlength) { ... };
})(jQuery);
// example
$("p").reverseText(0, 100);
但是如果我们之后想增加参数呢？我们的插件可能会有很多的选项，变量处理在这种情况下很快就会变得复杂。作为一个替代方案，我们可以传递一个JSON对象给方法：
(function($) {
$.fn.reverseText = function(params) { ... }
})(jQuery);
// example
$("p").reverseText( { minlength: 0, maxlength: 100 } );
reverseText函数的第一行应该定义一组默认参数，用户可以自定义这些参数的值去覆盖它们。jQuery的extend函数可以帮我们实现：
// merge default and user parameters
params = $.extend( {minlength: 0, maxlength: 99999}, params);
这里，params.minlength等于0，而params.maxlength等于99999，直到调用时被新的值覆盖。
插件代码
我们可以开始写我们的主要代码了：
// traverse all nodes
this.each(function() {
// express a single node as a jQuery object
var $t = $(this);
// find text
var origText = $t.text(), newText = '';
// text length within defined limits?
if (origText.length >= params.minlength && origText.length <= params.maxlength) {
// reverse text
for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
$t.text(newText);
}
});
解释：
- 方法this.each遍历了所有的jQuery DOM节点，并调用了一个匿名函数。
- 在这个匿名函数里，'this'代表了一个节点。我们把这个jQuery的节点集合赋值予$t，这样我们就能使用jQuery的方法了。
- 变量origText被赋予了节点的文本值，而变量newText则被设为一个空的字符串。
- 如果origText的长度介于params.minlength和params.maxlength之间，那么通过一个循环，我们把它的值进行了翻转。然后，我们相应的更新了DOM节点的文本值。
别破坏连锁！
最后，切记要返回一个jQuery对象，这样其他方法可以进行链式调用了：
return this;
完整的代码
我们的插件代码终于完成了：
(function($) {
// jQuery plugin definition
$.fn.reverseText = function(params) {
// merge default and user parameters
params = $.extend( {minlength: 0, maxlength: 99999}, params);
// traverse all nodes
this.each(function() {
// express a single node as a jQuery object
var $t = $(this);
// find text
var origText = $t.text(), newText = '';
// text length within defined limits?
if (origText.length >= params.minlength && origText.length <= params.maxlength) {
// reverse text
for (var i = origText.length-1; i >= 0; i--) newText += origText.substr(i, 1);
$t.text(newText);
}
});
// allow jQuery chaining
return this;
};
})(jQuery);
文件保存为：jquery.reversetext.js。之后在HTML页面里我们可以在加载jQuery后引入它：
jQuery plugin: reverseText
This jQuery plugin reverses all the text in the selected nodes.
- This text will be reversed
- This text will not be reversed
- reversed
- not reversed
现在这个页面的list的第一行和第三行都被翻转了（记住，第一项是从0开始）：
资源：
现在你应该对jQuery插件开发有不错的了解了。SitePoint JavaScript forum也是一个学习的好地方。
Translated by icyfire @ Canaand on Wed, 28th Oct.
