在这篇教程里，我们将会创建一个简单的插件来解释一些基础。这个插件的作用是将一个或者多个选择的节点的文本翻转（示例页面）。

为什么要创建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.

作者：Craig Buckler
原文：How To Develop a jQuery Plugin