jquery扩展:$.extend()和$.fn.extend()

通过jquery的扩展,我们可以灵活的使用jquery,来写一些自定义插件,丰富自己代码的功能。
jquery的扩展可以分为两个部分:类的扩展和对象的扩展。

jquery类的扩展:$.extend()

使用jQuery.extend()可以对jQuery类添加静态属性和方法,这些添加的属性和方法,都是通过类
来进行访问的。例如:$.ajax(),这个就是一个静态的方法。

写法1:
    jQuery.foo = function(){ alert("foo"); };
写法2:
    $.extend.foo = function(){ alert("foo"); };
写法3:
    $.extend = {
        foo:function(){
            alert("foo");
        }
    }

以上三种方式都是等价的,为jQuery类添加一个foo()的静态方法,我们可以在代码中这样调用:

    $.foo();

$.extend()还有一种用法,用于扩展对象:

    var options = jQuery.extend(deep,target,src1,src2);

其中:deep是boolean值,如果deep为true,则进行深度扩展。这个函数返回值options,就是target和src1,src2三个对象合并后的对象。

    var options = $.extend({aa:1,bb:2},{cc:3,bb:4},{ee:5});
    //{aa:1,bb:4,cc:3,ee:5}
    var options = $.extend(true,{aa:1,bb:{aaa:1,bbb:2}},{cc:1,dd:2},{bb:{aaa:4,ccc:5},cc:2});
    //{aa:1,bb{aaa:4,bbb:2,ccc:5},cc:2,dd:2}

如果不想修改原来的对象,产生一个新对象,那么可以将target设为{}空对象,就可以返回一个新的对象

    var options = $.extend({},src1,src2);

    var options = $.extend({},{aa:1},{bb:2});
    //{aa:1,bb:2}

jQuery实例对象的扩展:jQuery.fn.extend()
在jquery源码中我们看到:jQuery.fn = jQuery.prototype = {…}
所以,使用jQuery.fn定义的属性方法都可以在jquery实例化对象上使用。

    $.fn.showName = function(){
        alert("I will show this name!!");
    };

    调用:
    $(selector).showName();//I will show this name!!

在jQuery.fn定义的方法中,是允许使用jquery方法的,原生js在这里暂不被支持。

    $.fn.check = function(){
        this.each(function(){
            var _this = $(this);
            _this.attr("checked","checked");
        });
    }

一般情况下,为了防止与源代码中prototype的冲突,避免污染环境,通常将新写的jquery扩展放到立即执行函数中。

    (function($){

        $.extend = {
            foo:function(){ alert("foo"); }
        };
        $.fn.extend.showName = function(){
            alert("I will show this name");
        };
    })(jQuery);

你可能感兴趣的:(javascript)