教你理解jQuery的$.fn、$.extend()和$.fn.extend()

原创 jquery extend

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

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

jQuery.fn.extend()
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);