【学习笔记】jQuery库扩展

jQuery库中有可以进行实力扩展也可以进行对象属性的扩展，所以在对jQuery进行扩展时，要注意是扩展类的属性还是实例的属性。（下面的jQuery均可以利用$进行替代）
在进行扩展前先介绍下jQuery中对对象进行扩展的方法jQuery.extend，
jQuery.extend([deep], target, object1, [objectN])
（1）当其中只有一个参数时表示的是对jQuery类的扩展，即在类上添加行的属性和方法

$.extend({
  test:function(){alert('test函数')}
})
//可以通过$.test的方式进行调用

（2）当其中的参数包含多个对象时,表示的是将多个对象进行合并到第一个对象中，同时返回第一个对象（修改后）。如果想要返回的一个新的对象而不影响参数，则设置第一个参数为{}，jQuery.extend({},obj1,obj2….)

var Css1={size: "10px",style: "oblique"}
var Css2={size: "12px",style: "oblique",weight: "bolder"}
 jQuery.extend(Css1,Css2)
 //Css1 = {size: "12px",style: "oblique",weight: "bolder"}

（3）上面的方法是属于浅拷贝，既不会对对象中的成员对象进行扩展拷贝，如果对象属性中有引用类型的数据，则会导致直接以引用进行赋值，则可能导致对象间的香相互影响，如果想要实现深拷贝，则可以设置第一个参数为true进行
先看浅拷贝

 jQuery.extend(   
     { name: “John”, location: { city: “Boston” } },   
      { last: “Resig”, location: { state: “MA” } }   
    ); 
    //结果：{ name: “John”, last: “Resig”, location: { state: “MA” } }

深拷贝

jQuery.extend(  true， 
     { name: “John”, location: { city: “Boston” } },   
      { last: “Resig”, location: { state: “MA” } }   
    ); 
    //结果：{ name: “John”, last: “Resig”, location: { city: “Boston”, state: “MA” } }  

jQuery.fn.extend只能对实例进行扩展而不能对普通的对象实现上面的功能。

一、给jQuery添加类方法（均要通过类名进行调用）
（1）直接在类名上添加

jQuery.add = function (a,b){
    return a + b;
}

（2）利用$.extend方式进行扩展（即给extend传递一个对象参数即是对jQuery的扩展）

jQuery.extend({
     add:function (a,b) {
        return a+b;
    },
    sub:function (a,b) {
        return a-b;
    }
})

（3）利用命名空间

jQuery.plugins = {
    function add(a,b){
    return a + b
  },
 function  sub(a,b) {
    return a-b;
  }
}
//利用jQuery.plugins.add的方式进行调用

二、实例属性进行扩展（其实是利用了原型继承，利用实例进行调用）
（1）直接对原型链进行扩展

jQuery.fn.add = function (a,b) {
    return a+b;
}
//调用方式  $("a").add(1,2)

（2）利用jquery.fn.extend

jQuery.fn.extend({
    add:function (a,b) {
        return a+b;
    },
    sub:function (a,b) {
        return a-b;
    }
})

上面的参数可以通过$.extend的方式进行扩展而不用写死

jQuery.fn.attr =function (options) {
    var default = {a:1,b:2};
    opt = $.extend({},options,default);
    /*在做一些逻辑操作*/
}

jQuery本身就是利用闭包的方式在window对象上进行扩展添加一个全局的对象，对jQuery进行扩展时可以考虑想同类似的方式。
同时通常对实例方法进行扩展的时候都会利用闭包的形式进行扩展，防止变量之间的相互污染

(function ($) {
    var default = {},
    $.fn.ownFun = function (options) {
        /*参数处理*/
        options = $.extend({},options,default);
        /*逻辑处理*/
    }
})(jQuery)