理解Jquery插件开发

Jquery开发插件两种方式

• 一种是类级别的插件 （添加新的Jquery全局函数，就是给Jquery类本身添加方法）
• 一种是对象级别的插件 （给Jquery对象添加方法）

一.类级别的开发

实际这种方法就是添加类方法，类似添加静态方法。将函数定义在Jquery的命名空间中。像$.post()

1.添加全局函数

1.添加全局函数

jQuery.foo = function(){
	alert('测试');
};

2.调用

jQuery.foo();或者$.foo();

3.再个全局函数

jQuery.bar = function(param){
	alert('测试'+param);
};

1. 使用jQuery.extend(object);

   jQuery.extend({ foo: function(){ alert(‘测试’); }, bar: function(param){ alert(‘测试’＋param); }; });

5.使用命名空间来创建

jQuery.myplugin = {
	foo: function(){
		alert('测试');
	},
	bar: function(param){
		alert('测试'+param);
	}//(这里不要有, 因为在IE6中不识别，在空间项目中就遇到过)
};

如果你采用了命名空间来创建，调用的方法如下

$.myplugin.foo();
$.myplugin.bar('dd');

这种方式可以防止命名空间内的函数冲突，比如你定义了

$.myplugin.get();

二. 第二种方式是对象级别的插件

(function($){
	$.fn.extend({
		pluginname: function(option, callback){
			//插件要做的代码
		}
	});
})(jQuery);

或者是

(function($){
	$.fn.pluginname = function(){
		//插件要做的代码
	};
})(jQuery);

先写一个

$.fn.dosomething = function(){
	//我们要实现的代码
};

调用

$('#id').dosomething();

---

好了以上就是定义jquery插件

下面来讨论下高级点的

当我们写过程式代码的时候用一个函数搞定所有功能，但是我们想分解我们写的代码，这个时候可能会想分解为多个插件。

但是想一下，我们用多个函数来分工，而不增加多余得命名空间。我们可以这样实现，利用函数是javascript种最基本的类对象，在函数里面声明属性

我们这里用了默认值，然后复写 foreground 的值，这就是接收参数来控制插件的行为

$.fn.dosomething = function(options){
	var defaults = {
		foreground: 'red',
		background: 'yellow'
	};
	
	var opts = $.extend(defaults, options);
	
	//这里实行的代码
};

调用代码

$('#id').dosomething({
	foreground: 'blue';
});

我们来让用户自动来设置options的默认设置，这种设置方便了使用者来覆盖和修改插件，（这种方式很暴露啊！）

$.fn.dosomething = function(options){
	var opts = $.extend({}, $.fn.dosomething.defaults, options);
	//这里执行的代码
};

$.fn.dosomething.defaults = {
	foreground: 'red',
	background: 'yellow'
};

覆盖了foreground

$.fn.dosomething.defaults.foreground = 'blue';

调用代码

$('#id).dosomething();

传递参数

$('#id').dosomething({
	foreground: 'green'
});

---

接着我们根据上面的，适当的来使用一些函数，来让使用者可以从新自定义函数，比如你想滑动一个块，但是这个滑动的过程有很多种效果，比如渐变，滑动之类的，这样就可以扩展自定义想要的效果了

$.fn.dosomething = function(options){
	return this.each(function(){
		var $this = $(this);
		var markup = $.fn.dosomething.format(markup);
	});
}
//定义我们的format方法
$.fn.dosomething.format(txt){
	return '<strong>'+txt+'</strong>';
};

上面的技巧可以方便的让使用者可以改成自己想好的效果，但是也要考虑到任何的对于参数或者其他的改动也许会破坏向后的兼容性。

So，你要是不能肯定要让使用者重写哪个特定的函数，就不能这么做了，下面有点像PHP的私有方法了。

先解释下，定义更多的函数，但是不搅乱命名空间，也不暴露给其他使用者，这就是闭包的功能。

(function($){
	$.fn.dosomething = function(options){
		debug(this);
	};
	
	//私有的方法来debugging
	function debug($obj){
		if(window.console && window.console.log)
			window.console.log('dosomething selection count:'+$obj.size());
	};
})(jQuery);

---

最后来了解下这个东西 fn

jQuery.fn = jQuery.prototype

当执行下面代码时候，会产生一个jquery的类实例

$('#id')

我们使用下面代码向jquery类添加了“成员函数”，接着jquery类的实例就可以使用这个函数。

$.fn.extend({
	alertclick: function(){
		$(this).click(function(){
			alert($(this).val());
		});
	}
});

$('#id').alertclick();

下面我们给jquery来添加类方法，这个第一种方式创建插件还记得吧！

$.extend({
	add: function(a, b){
		return a+b;
	};
});

调用的时候，我们这样

$.add(1, 2); //return 3

好了，下面做下总结，两种创建插件方法，一个类级别，你可以这样用

$.myfunction(param);

另一种是对象级别

$('#id').myfunction(param);

两种方式我们分别定义了私有方法和静态方法！

希望对大家有用！改写自jquery插件开发，加上了自己的理解！