jQuery插件编写：对象级别插件（二）

通过了上一篇的讲解，相信你对于开发“实用函数”jQuery插件的基本技巧有了一定的认识。比如通过即时执行函数来正确使用$函数，通过$.extend()函数实现配置对象的合并。在这一篇中将讲解更常用的一种扩展jQuery的方法。即给jQuery包装集（jQuery对象）添加方法。在这里说明，本文所说的jQuery包装集和jQuery对象是同一个概念。都是通过$()函数获得的JS对象。但包装集这个说法显然更能说明其真实含义，毕竟多数时候$()都会返回多个DOM对象的封装。

1. 初步认识

 

我们先来看看原有的jQuery包装集如何调用对象方法执行相应的操作。

$("a").css("color", "red");

这段代码先获得一个包装集包装了所有的a对象，然后将所有的a对象添加红色显示。我们今天所说的这种插件很容易就能写出来。比如我们可以添加一个方法叫做setColorToRed()。可以直接将选定的元素设置成红色。可以这样写

(function($) {
	$.fn.setColorToRed = function() {
		this.css("color", "red"); // this 直接指代包装集对象
		return this; // 返回this，保证可以链式调用其它方法
	}
})(jQuery);
$("a").setColorToRed(); // 直接设置所有a为红色

jQuery中 $.fn 是 $.prototype的别名，因此我们把方法添加到$.fn上就相当于给jQuery对象原型添加方法。最后方法中返回this，保证了方法支持链式调用。

2. jQuery对象级插件的通常做法。

这种类型的插件在很多时候都对选择的DOM进行了增强。所谓增强可以理解为给选定的HTML添加CSS类、添加新的HTML标签等等。比如有一个插件叫做showDialog。在页面中有这样的一个HTML标签

<div id="dialog"></div>

在执行 

$("#dialog").showDialog({
	title : "警告",
	content : "系统运行错误！"
});

之后HTML会变成

<div id="dialog"></div>
	<div id="dialog" class="dialog-container">
		<h1 class="dialog-title">标题></h1>
		<div class="dialog-content">
			<p>系统运行错误！</p>
		</div>
		<button>确定</button>
	</div>

通过jQuery的一系列操作很容易生成上述的HTML代码并插入到DOM文档树中。再配合一定的CSS样式就可以显示出一个对话框出来。这样就带给我们一个编写jQuery对象插件的一般思路。

第一步：写出完整的HTML文件和CSS文件，包含用到的图片。并在浏览器中调好最终效果

第二步：通过jQuery插件代码中动态的在我们选择的DOM对象中添加需要的HTML代码和相应的CSS类。注意尽量添加CSS类而不要添加ID属性，因为有可能在同一个页面调用多次你的插件，就会产生多个ID相同的DOM 节点。

在配合上一篇中学到的相关知识。可以给出通用的创建对象级别插件的模板代码：

(function($) {
	var settings = {
		def1 = "def1",
		def2 = "def2",
		// 更多的默认配置
	};
	
	$.fn.myPlugin = function(options) {
		
		settings = $.extend(settings, options || {}); // 合并默认和用户配置
		
		// 这里return也是为了保证链式调用
		// 并且each方法会遍历所有DOM对象，使得我们可以单个处理包装集中的所有DOM对象
		return this.each(function() { 
			// 这里的this是一个DOM对象
			init(this);
		});
		//如果你的插件很复杂，使用更多的函数分割逻辑是个好方法
		function init(target) {
			//这里写插件的逻辑，可以动态添加DOM节点和为节点添加CSS样式等
		}
	}
})(jQuery);

最后总结一下，jQuery的对象插件扩展一般都是添加新的DOM节点，来增强页面效果。在编写代码前一定要先写出静态的HTML代码和CSS样式。