【学习笔记】jQuery库扩展

来源:互联网 发布:黑白棋估值函数优化 编辑:程序博客网 时间:2024/06/08 10:13

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)
原创粉丝点击