首页 > $.fn $.fn.extend $.extend 的区别?

$.fn $.fn.extend $.extend 的区别?

$.fn.extend 这个代表扩展Jquery对象
$.extend 这个代表扩展Jquery类本身
以上这两个我都查到了,

但是我想问的是:

$.fn 和 $.fn.extend 是什么关系?
$.extend 和 $.方法名 是什么关系?

从我看到的代码中,我猜测前者是不是后者的简写?后者能一次性添加多个方法,而类型与$.fn.的这种智能添加一个方法?

比如$.fn.abc() 等于 $.fn.extend({

abc:function(){},

});

请大神给详细解释下,谢谢了


$.extend=function(name,fn){
    this.prototype[name] = fn
}

$.fn.extend = function(name,fn){
    $.extend.apply(this, arguments)
}

extend是$的一个方法,这个方法的作用是为$扩展其他方法。
我没有看过jq的源码,但是我猜这种扩展应该向上面的代码那样,是添加在原型上的。


第一个问题:

  1. $.fn$.prototype的缩写(图片来自jQuery源码)

  2. $.fn.extend()jQuery的一个方法,用于拓展jQuery实例的方法,也就是说可以将方法写入参数(object)中,每个jQuery实例都将拥有方法,可以通过$(selector).yourMethod()调用;

第二个问题:

  1. $.extend()jQuery的一个方法,在接受两个参数或以上参数时,会将第二个及以后的参数合并到第一个中,主要用来修改/拓展配置对象;在接受一个参数(object)时,会将参数中的方法拓展为jQuery自身的方法;

  2. $.方法名则是直接调用jQuery自身的方法,如$.each()


说说我对$.fn 和 $.extend理解,主要是在编写插件上用得比较多,通过$.extend()来扩展jQuery,或者通过$.fn 向jQuery添加新的方法,看例子:

$.extend({
    sayHello: function(name) {
        console.log('Hello,' + (name ? name : 'World') + '!');
    }
})
$.sayHello(); //直接调用,输出 Hellow,World!
$.sayHello('Panfen'); //带参调用输出 Hello,Panfen!

上面代码中,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用。看一下$.fn的例子:

$.fn.myPlugin = function() {
    //在这里面,this指的是用jQuery选中的元素
    //example :$('a'),则this=$('a')
    this.css('color', 'red');
}
$('a').myPlugin();  //a 标签添加样式

在处理插件参数的接收上,通常使用jQuery的extend方法,给extend方法传递单个对象的情况下,这个对象会合并到jQuery身上,所以我们就可以在jQuery身上调用新合并对象里包含的方法了。当给extend方法传递一个以上的参数时,它会将所有参数对象合并到第一个里。同时,如果对象中有同名属性时,合并的时候后面的会覆盖前面的。
  利用这一点,我们可以在插件里定义一个保存插件参数默认值的对象,同时将接收来的参数对象合并到默认对象上,最后就实现了用户指定了值的参数使用指定的值,未指定的参数使用插件默认值。看下面的例子:

$.fn.myPlugin = function(options) {
    var defaults = {
        'color': 'red',
        'fontSize': '12px'
    };
    var settings = $.extend(defaults, options);
    return this.css({
        'color': settings.color,
        'fontSize': settings.fontSize
    });
}

//使用
$('a').myPlugin({
    'color': '#2C9929'
});

希望能有所帮助,啊哈~



这两个是一个方法
$.extend说白了就是给一个对象进行属性或者方法的扩展,看看源码很容易明白的

【热门文章】
【热门文章】