jQuery 插件开发全解析

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

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 + '".');
};

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>}
});

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);

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

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

$('#myDiv').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'
});

// 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'
});

// 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>';
};

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

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);

$.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;
		//...
		

<!-- 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>

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

// 创建一个闭包
(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 ) {//....
//......
};

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

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

jQuery 插件开发全解析

原文：http://blog.csdn.net/mychirs/article/details/39989681