理解jquery的$.extend()、$.fn和$.fn.extend()

1,233 阅读1分钟
jQuery为开发插件提供了两个方法: 

1.jQuery.extend() 
2.jQuery.fn.extend()


前言:
jQuery.fn
//jQuery.fn=jQuery.prototype
jQuery.fn=jQuery.prototype={
	init:function(selector,context){
		//opt
	},
	//...........
}
用类的思想来理解jQuery,jQuery是一个封装得非常好的类,例如$("#btn")会生成一个jQuery类实例;

(1)jQuery.extend(object)

//为jQuery类添加类方法,可以理解为添加静态方法.

//扩展 jQuery 类本身,为jQuery类添加类方法(静态方法

jQuery.extend({
	max:function(a,b){
		return a < b ? a : b;
	},
	min:function(a,b){
		return a > b ? a : b;
	}
})
jQuery.max(2,3)  //3
jQuery.min(4,5)  //4

(1.2)jQuery.extend(object,object1,[objectN])

//用一个或多个其他对象来扩展一个对象,返回被扩展的对象。

例子1:
var obj = { name: 'Alice', age: 25, career: "teacher" };
var object = { name: 'Bruce', career: "doctor" };
jQuery.extend(obj, object); //obj = { name: 'Bruce', age: 25, career: "doctor" }
例子2:
var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar" }; 
jQuery.extend(settings, options); 
结果:settings = { validate: true, limit: 5, name: "bar" },

//会发现后面的对象的值会覆盖前面的对象的值

(2)jQuery.fn.extend()

jQuery.fn=jQuery.prototype 

由于对原型的修改会影响所有实例,因此fn上的方法会对每一个jQuery实例有效。 

对jQuery.fn的扩展,就是为jQuery类增加成员函数,jQuery的类实例可以使用这个成员函数.

$.fn.extend({
	clickFun:function(){
		$(this).click(function(){
			alert($(this).val());
		});
	}
});
$("#input").clickFun();

jQuery.fn.extend=jQuery.prototype.extend
//可以拓展一个对象到jQuery的prototype里去,这样就是插件机制。
(function($){
	$.fn.tooltip=function(options){};
	//等价于
	var tooltip={
		function(options){}
	};
	$.fn.extend(tooltip)=$.prototype.extend(tooltip)=$.fn.tooltip
})(jQuery);

(3)jQuery.extend()与jQuery.fn.extend()的区别 

jQuery.extend()是为类添加类方法(静态方法),需要通过jQuery类来调用(或直接$.XXX调用);
jQuery.fn.extend()是为jQuery类添加成员函数(实例方法),所有jQuery实例都可以直接调用(需要使用$().XXX调用).