$.fn、$.extend()和$.fn.extend()，傻傻分不清楚 - 大前端

今天所要讲的内容是在熟练使用jQuery的基础上对它进行一些拓展。所以需要各位童鞋对jQuery设计思想有一定了解。如果有童鞋对jQuery了解还不是很多，那么这篇阮一峰老师的文章《jQuery设计思想》，应该会给予大家很大的帮助。

jQurey一共提供了两种拓展方式，分别为：

1. jQuery.fn.extend()

2. jQuery.extend()

相信很多童鞋对jQuery的使用并不陌生，但是如果深究细节，什么是$.fn、$.fn.extend()和$.extend()两种方式有什么不同，相信很多童鞋就有些一知半解了。今天咱们就来细说这个事情。

jQuery.fn

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

原来jQuery.fn = jQuery.prototype，相信大家对prototype肯定不会陌生啦，这样说明是不是很好理解呢？！

虽然js没有明确的类的概念，但是用类的方式来理解它，会方便很多。jQuery便是一个封装得非常好的类，eg：我们用$('#btn')便会生成一个jQuery类的实例。

jQuery.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法，类似于Java中的private方法。eg：

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

Objectj Query.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类的实例可以使用这个“成员函数”。

eg：我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert当前编辑框里的内容。可以这么做：

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

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

jQuery.extend()的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法。这就是这两种拓展方式的差异所在，明白这个很重要！明白这个很重要！明白这个很重要！

jQuery.fn.extend = jQuery.prototype.extend

你可以拓展一个对象到jQuery的prototype上，这样的话就实现jQuery的插件机制了。

(function($) {    $.fn.tooltip = function(options) {        // TODO    };    // 等价于    var tooltip = {        function(options) {// TODO        }    };    $.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip})(jQuery);

jQuery的设计精髓还远远不止这些，我以前总结过一篇非常简短的文章（当时sf还没有出记笔记这个功能），其中说明了jQuery中一个很重要的设计思想：链式写法。

详细的请参照《jQuery 岂能仅止于用，怎么也得扩展一下子啊》。现在想想这篇文章写得真的好low，以后我会不间断更新的 ：）

该文章改编自《理解jquery的$.extend()、$.fn和$.fn.extend()》