jQuery 插件开发全解析

jQuery插件的开发包含两种：

一种是类级别的插件开发，即给jQuery加入新的全局函数，相当于给jQuery类本身加入方法。jQuery

的全局函数就是属于jQuery命名空间的函数，还有一种是对象级别的插件开发，即给jQuery对象加入方法。下

面就两种函数的开发做具体的说明。

1 、类级别的插件开发

类级别的插件开发最直接的理解就是给jQuery类加入类方法，能够理解为加入静态方法。

典型的样例就

是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发能够採用例如以下几种形式进

行扩展：

1.1  加入一个新的全局函数

加入一个全局函数，我们仅仅需例如以下定义：

jQuery.foo = function() {
<span style="white-space:pre">	</span>alert('This is a test. This is only a test.');
};

调用的时候能够这样写： jQuery.foo(); 或 $.foo();

1.2  添加多个全局函数

加入多个全局函数，可採用例如以下定义：

jQuery.foo = function() {
<span style="white-space:pre">	</span>alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
<span style="white-space:pre">	</span>alert('This function takes a parameter, which is "' + param + '".');
};

调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3  使用jQuery.extend(object);

jQuery.extend({
<span style="white-space:pre">	</span>foo: function() {
<span style="white-space:pre">		</span>alert('This is a test. This is only a test.');
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>bar: function(param) {
<span style="white-space:pre">		</span>alert('This function takes a parameter, which is "' + param +'".');
<span style="white-space:pre">	</span>}
});

1.4  使用命名空间

尽管在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。

可是仍然不可避免某

些函数或变量名将于其它jQuery插件冲突，因此我们习惯将一些方法封装到还有一个自己定义的命名空间。

jQuery.myPlugin = {
<span style="white-space:pre">	</span>foo:function() {
<span style="white-space:pre">		</span>alert('This is a test. This is only a test.');
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>bar:function(param) {
<span style="white-space:pre">		</span>alert('This function takes a parameter, which is "' + param + '".');
<span style="white-space:pre">	</span>}
};

採用命名空间的函数仍然是全局函数，调用时採用的方法：

$.myPlugin.foo();
$.myPlugin.bar('baz');

通过这个技巧（使用独立的插件名），我们能够避免命名空间内函数的冲突。

2 、对象级别的插件开发

对象级别的插件开发须要例如以下的两种形式：、

形式1：

(function($) {
	$.fn.extend({
		pluginName: function(opt, callback) {
			// Our plugin implementation code goes here.
		}
	})
})(jQuery);

形式2：

(function($) {
	$.fn.pluginName = function() {
		// Our plugin implementation code goes here.
	};
})(jQuery);

上面定义了一个jQuery函数,形參是$。函数定义完毕之后,把jQuery这个实參传递进去.马上调用运行。

这种优点是,我们在写jQuery插件时,也能够使用$这个别名,而不会与prototype引起冲突.

2.1  在JQuery 名称空间下申明一个名字

这是一个单一插件的脚本。 假设你的脚本中包括多个插件。 或者互逆的插件 （比如： $.fn.doSomething()

和 $.fn.undoSomething()）。那么你须要声明多个函数名字。

可是，通常当我们编写一个插件时，力求仅

使用一个名字来包括它的全部内容。我们的演示样例插件命名为“highlight“

$.fn.hilight = function() {
	// Our plugin implementation code goes here.
};

我们的插件通过这样被调用：

$('#myDiv').hilight();

可是假设我们须要分解我们的实现代码为多个函数该怎么办？有非常多原因：设计上的须要；这样做更easy

或更易读的实现。并且这样更符合面向对象。

这真是一个麻烦事。把功能实现分解成多个函数而不添加多余的

命名空间。出于认识到和利用函数是javascript中最主要的类对象，我们能够这样做。

就像其它对象一样。

函数能够被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象。不论什么其它的属性或者函数我们

须要暴露出来的，都能够在"hilight" 函数中被声明属性。稍后继续。

2.2  接受options 參数以控制插件的行为

让我们为我们的插件加入功能指定前景色和背景色的功能。

我们或许会让选项像一个options对象传递给

插件函数。

比如：

// plugin definition
$.fn.hilight = function(options) {
	var defaults = {
		foreground: 'red',
		background: 'yellow'
	};
	// Extend our default options with those provided.
	var opts = $.extend(defaults, options);
	// Our plugin implementation code goes here.
};

我们的插件能够这样被调用：

$('#myDiv').hilight({
	foreground: 'blue'
});

2.3  暴露插件的默认设置

我们应该对上面代码的一种改进是暴露插件的默认设置。 这对于让插件的使用者更easy用较少的代码覆盖

和改动插件。接下来我们開始利用函数对象。

// plugin definition
$.fn.hilight = function(options) {
	// Extend our default options with those provided.
	// Note that the first arg to extend is an empty object -
	// this is to keep from overriding our "defaults" object.
	var opts = $.extend({}, $.fn.hilight.defaults, options);
	// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
	foreground: 'red',
	background: 'yellow'
}

如今使用者能够包括像这种一行在他们的脚本里：

//这个仅仅须要调用一次，且不一定要在ready块中调用
$.fn.hilight.defaults.foreground = 'blue';

接下来我们能够像这样使用插件的方法，结果它设置蓝色的前景色：

$('#myDiv').hilight();

如你所见，我们同意使用者写一行代码在插件的默认前景色。并且使用者仍然在须要的时候能够有选择的

覆盖这些新的默认值

// 覆盖插件缺省的背景颜色
$.fn.hilight.defaults.foreground = 'blue';
// ...
// 使用一个新的缺省设置调用插件
$('.hilightDiv').hilight();
// ...
// 通过传递配置參数给插件方法来覆盖缺省设置
$('#green').hilight({
	foreground: 'green'
});

2.4  适当的暴露一些函数

这段将会一步一步对前面那段代码通过有意思的方法扩展你的插件（同一时候让其它人扩展你的插件）。比如。

我们插件的实现里面能够定义一个名叫"format"的函数来格式化高亮文本。我们的插件如今看起来像这样。

默认的format方法的实现部分在hiligth函数以下。

// plugin definition
$.fn.hilight = function(options) {
	// iterate and reformat each matched element
	return this.each(function() {
		var $this = $(this);
		// ...
		4
		var markup = $this.html();
		// call our format function
		markup = $.fn.hilight.format(markup);
		$this.html(markup);
	});
};
// define our format function
$.fn.hilight.format = function(txt) {
	return '<strong>' + txt + '</strong>';
};

我们非常easy的支持options对象中的其它的属性通过同意一个回调函数来覆盖默认的设置。这是另外一个

出色的方法来改动你的插件。 这里展示的技巧是进一步有效的暴露format函数进而让他能被又一次定义。 通过这

技巧，是其它人可以传递他们自己设置来覆盖你的插件，换句话说。这样其它人也可以为你的插件写插件。

考虑到这个篇文章中我们建立的没用的插件， 你或许想知道到底什么时候这些会实用。 一个真实的样例是Cycle

插件.这个Cycle插件是一个滑动显示插件。他能支持很多内部变换作用到滚动。滑动，渐变消失等。可是实际

上，没有办法定义或许会应用到滑动变化上每种类型的效果。

那是这样的扩展性实用的地方。 Cycle插件对使用

者暴露"transitions"对象，使他们加入自己变换定义。插件中定义就像这样：

$.fn.cycle.transitions = {
// ...
};

这个技巧使其它人能定义和传递变换设置到Cycle插件。

2.5  保持私有函数的私有性

这样的技巧暴露你插件一部分来被覆盖是很强大的。可是你须要细致思考你实现中暴露的部分。

一但被暴

露，你须要在头脑中保持不论什么对于參数或者语义的修改或许会破坏向后的兼容性。

一个通理是。假设你不能肯

定是否暴露特定的函数。那么你或许不须要那样做。

那么我们怎么定义很多其它的函数而不搅乱命名空间也不暴露实现呢？这就是闭包的功能。

为了演示，我们将

会加入另外一个“debug”函数到我们的插件中。这个 debug函数将为输出被选中的元素格式到firebug控制

台。

为了创建一个闭包，我们将包装整个插件定义在一个函数中。

(function($) {
	// plugin definition
	$.fn.hilight = function(options) {
		debug(this);
		// ...
	};
	// private function for debugging

	function debug($obj) {
		if (window.console && window.console.log) window.console.log('hilight selection count: ' + $obj.size());
	};
	// ...
})(jQuery);

我们的“debug”方法不能从外部闭包进入,因此对于我们的实现是私有的。

2.6  支持Metadata 插件

在你正在写的插件的基础上，加入对Metadata插件的支持能使他更强大。个人来说，我喜欢这个

Metadata插件，由于它让你使用不多的"markup”覆盖插件的选项（这很实用当创建样例时）。并且支持它

很easy。更新：凝视中有一点优化建议。

$.fn.hilight = function(options) {
	// ...
	// build main options before element iteration
	var opts = $.extend({}, $.fn.hilight.defaults, options);
	return this.each(function() {
		var $this = $(this);
		// build element specific options
		var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
		//...
		

这些变动行做了一些事情：它是測试Metadata插件是否被安装

假设它被安装了，它能扩展我们的options对象通过抽取元数据

这行作为最后一个參数加入到JQuery.extend， 那么它将会覆盖不论什么其他选项设置。

如今我们能从"markup”

处驱动行为,假设我们选择了“markup”：

<!-- markup -->
<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>

如今我们能高亮哪些div仅使用一行脚本：

$('.hilight').hilight();

2.7  整合

以下使我们的样例完毕后的代码：

// 创建一个闭包
(function($) {
	// 插件的定义
	$.fn.hilight = function(options) {
		debug(this);
		// build main options before element iteration
		var opts = $.extend({}, $.fn.hilight.defaults, options);
		// iterate and reformat each matched element
		return this.each(function() {
			$this = $(this);
			// build element specific options
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			// update element styles
			$this.css({
				backgroundColor: o.background,
				color: o.foreground
			});
			var markup = $this.html();
			// call our format function
			markup = $.fn.hilight.format(markup);
			$this.html(markup);
		});
	};
	// 私有函数：debugging

	function debug($obj) {
		if (window.console && window.console.log) window.console.log('hilight selection count: ' + $obj.size());
	};
	// 定义暴露format函数
	$.fn.hilight.format = function(txt) {
		return '<strong>' + txt + '</strong>';
	};
	// 插件的defaults
	$.fn.hilight.defaults = {
		foreground: 'red',
		background: 'yellow'
	};
	// 闭包结束
})(jQuery);

这段设计已经让我创建了强大符合规范的插件。我希望它能让你也能做到。

3 、总结

jQuery为开发插件提拱了两个方法，各自是：

jQuery.fn.extend(object); 给jQuery对象加入方法。

jQuery.extend(object); 为扩展jQuery类本身.为类加入新的方法。

3.1 jQuery.fn.extend(object);

fn 是什么东西呢。查看jQuery代码。就不难发现。

jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};

原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。

尽管 javascript 没有

明白的类的概念。可是用类来理解它，会更方便。jQuery便是一个封装得很好的类，比方我们用 语句

$("#btn1") 会生成一个 jQuery类的实例。

jQuery.fn.extend(object); 对jQuery.prototype进得扩展。 就是为jQuery类加入“成员函数”。

jQuery类的实例能够使用这个“成员函数”。

比方我们要开发一个插件。做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。能够这

么做：

$.fn.extend({
	alertWhileClick: function() {
		$(this).click(function() {
			alert($(this).val());
		});
	}
});
$("#input1").alertWhileClick(); //页面上为：<input id="input1" type="text"/>

$("#input1") 为一个jQuery实例，当它调用成员方法 alertWhileClick后，便实现了扩展。每次

被点击时它会先弹出眼下编辑里的内容。

3.2 jQuery.extend(object);

为jQuery类加入加入类方法。能够理解为加入静态方法。如：

$.extend({
<span style="white-space:pre">	</span>add:function(a,b){return a+b;}
});

便为 jQuery 加入一个为 add 的 “静态方法”。之后便能够在引入 jQuery 的地方，使用这个方

法了，$.add(3,4); //return 7