jQuery - 小鸟系列之编写jQuery插件

编写插件的目的是给已经有的一系列方法或函数做一个封装，以便在其他地方重复使用，方便后期维护和提高开发效率

插件的种类

封装对象方法的插件：将对象封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件，95%以上都是封装对象方法的插件，例如：parent()、appendTo()、addClass()等

<script type="text/javascript">
	;(function($){
		$.fn.extend({
			"color":function(value){
				return this.css("color",value);
			}
		});
	})(jQuery);
</script>
<script type="text/javascript">
	$(function(){
		$("span").color("blue");
	});
</script>

封装全局函数的插件：可以将独立的函数加到jQuery命名空间之下。例如：解决冲突用的jQuery.noConflict()方法、常用的jQuery.ajax()方法以及去除首位空格的jQuery.trim()方法等。

<script type="text/javascript">
	;(function($){
		$.extend({
			"ltrim":function(text){
				return (text || "").replace( /^\s+/g, "" );
			},
			"rtrim":function(text){
				return (text || "").replace( /\s+$/g, "" );
			}
		});
	})(jQuery);
</script>
<script type="text/javascript">
	$(function(){
		$("textarea").val(
			$.trim("     test    ")+"\n"+
			$.ltrim("     test    ")+"\n"+
			$.rtrim("     test    ")
			);
	});
</script>

选择器插件：个别情况下，会需要用到选择器插件。虽然jQuery的选择器十分强大，但还是会需要扩充一些自己喜欢的选择器，例如：color(red)来选择所有红色的元素之类的想法。

插件的基本要点：

文件名推荐命名为 jquery.[插件名].js，以免和其他javascript库插件混淆。例如 jquery.color.js

插件内部，this指向的是当前选择器获取的 jQuery 对象，而不像一般的方法那么，例如 click() 方法，内部this指向的是 DOM 元素

可以通过 this.each 来遍历所有元素

插件应返回一个 jQuery 对象，以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量（字符串、数组等）

jQuery插件机制

jQuery 提供了两个用于扩展 jQuery 功能的方法，即 jQuery.fn.extend()方法和jQuery.extend()方法。前者用于扩展封装对象方法的插件，或者用于扩展后两张插件

jQuery.extend()方法除了可以用于扩展 jQuery 对象之外，还有一个强大的功能，就是用于扩展已有的 Object 对象

var settings = {validate: false, limit: 5, name: "foo" };
var options = {validate: true,  name: "bar" };
var newOptions = jQuery.extend(settings, options);

结果

newOptions = {validate: true, limit: 5,  name: "bar" }

jQuery.extend() 方法经常被用于设置插件方法的一系列默认参数，如下：

function foo(options){
	options = jQuery.extend({
		name:"bar",
		length:5,
		dataType:"xml"
	},options);
};

调用：

foo({ name: "a" , length:6 });

jQuery - 小鸟系列之编写jQuery插件

猜你喜欢