如何开发jQuery插件

最新推荐文章于 2024-10-18 17:51:23 发布

dingshi7798

最新推荐文章于 2024-10-18 17:51:23 发布

阅读量72

点赞数

文章标签： javascript json ViewUI

如何开发jQuery插件 jQuery是最受欢迎的JavaScript库，许多站点都将其用于动态效果和Ajax功能。但是，很少有开发人员深入研究插件开发。

在本教程中，我们将创建简单的插件来解释基础知识。我们的代码将反转一个或多个选定节点内的文本- 查看演示页面。

为什么要创建jQuery插件？

一句话：重复使用。通过扩展jQuery，您可以创建可在任何网页上使用的可重用组件。您的代码已封装，因此在其他地方使用相同的函数名称的风险较小。

jQuery的工作方式

jQuery的核心是传递DOM元素或包含CSS选择器的字符串。它返回一个jQuery对象，它是DOM节点的数组形式的集合。然后可以将一个或多个方法链接到这组节点，例如


// color all <p> tags red
$("p").css("color", "red");

注意：尽管jQuery库被命名为'jQuery'，但是'$'是引用它的快捷方式变量。请注意，其他库也可以自己获取“ $”。

jQuery插件如何工作

jQuery允许将方法添加到其库中。调用这些方法时，这些方法将通过JavaScript“ this”对象中的jQuery对象传递。可以根据需要操纵DOM节点，并且该方法应返回“ this”，以便可以链接其他函数。

我们的示例插件将使用以下代码调用：


// reverse the text in all <p> tags
$("p").reverseText();

我们还将添加两个可选参数minlength和maxlength。定义后，字符串长度必须在这些限制之间，以使反转发生。

插件声明

插件是使用jQuery fn函数定义的，例如


jQuery.fn.reverseText = function(params) { ... };

使用“ jQuery”而不是“ $”可确保与其他JavaScript库没有冲突。我们所有的内部代码都应引用“ jQuery”而不是“ $”。但是，我们可以使用匿名函数节省一些键入内容并减小文件大小：


(function($) {
	$.fn.reverseText = function(params) { ... };
})(jQuery);

此函数立即运行，并通过jQuery作为名为“ $”的参数传递。由于“ $”是局部变量，因此我们可以假定它始终引用jQuery库，而不是另一个首先抢占全局“ $”变量的库。

插件参数

我们的插件需要两个参数：minlength和maxlength。将它们定义为函数参数是最简单的，例如


(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扩展函数可以为我们解决这个问题：


// 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分配了DOM节点内的文本字符串。 newText设置为空字符串。
如果origText的长度介于params.minlength和params.maxlength之间，则循环将在newText中创建反向文本字符串。然后，将相应地更新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。然后，我们可以在jQuery库加载后将其包含在任何HTML页面中，例如


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>jQuery plugin: reverseText demonstration</title>
</head>
<body>

<h1>jQuery plugin: reverseText</h1>
<p>This jQuery plugin reverses all the text in the selected nodes.</p>

<ul>
<li>This text will be reversed</li>
<li>This text will not be reversed</li>
<li>reversed</li>
<li>not reversed</li>
</ul>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.reversetext.js"></script>
<script type="text/javascript">
// reverse even-numbered LI tag text
$("ul li:even").reverseText();
</script>

</body>
</html>

现在，此页面中的列表在第一个和第三个项目符号上具有颠倒的文字（请记住，第一个项目从0开始编号）：

反向文字