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

jQuery为开发插件提供了两个方法，分别是：

jQuery.fn.extend();

jQuery.extend();

 

jQuery.fn

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

jQuery.fn = jQuery.prototype是对jQuery对象（原型的）的方法进行扩展

jQuery.extend(object)是为jQuery类添加类方法，能够理解为添加静态方法。如：

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

Object jQuery.extend(target,object1,[objectN])

用一个或多个其余对象来扩展一个对象，返回被扩展的对象

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" }

jQuery.fn.extend(object)

对jQuery.prototype进行的扩展，就是为jQuery类添加“成员函数”。jQuery类的实例能够使用这个“成员函数”。

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

$.fn.extend({ alertWhileClick:function() { $(this).click(function(){ alert($(this).val()); }); } }); $("#input1").alertWhileClick(); // 页面上为：  

 

$("#input")为一个jQuery实例，当它调用成员方法alertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑器里的内容。

 

jQuery.extend()的调用并不会把方法扩展到对象的实例上，引用它的方法也须要经过jQuery类来实现，如jQuery.init()，而jQuery.extend()的调用把方法扩展到了对象的prototype上，因此实例化一个jQuery对象的时候，它就具备了这些方法。

 

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