jQuery性能优化——使用jQuery对象缓存

  所谓对象缓存,就是在使用jQuery对象时,先尽量使用变量保存对象名,然后,通过变量进行相应的方法操作。如下代码是欠妥的:

$("#divTip").bind("click",function(){alert("hello!");})
$("#divTip").css("width","200px");
$("#divTip").css("background-color","red");

比较优化的代码是:

var objTmp = $("#divTip")    //先使用变量进行保存
objTmp.bind("click",function(){alert("hello!");})
objTmp.css("width","200px");
objTmp.css("background-color","red");
// 如果想让定义的变量在其他函数中也能使用,可以将该变量定义为全局性的变量,实现代码如下:
    window.objPub = {    //在全局范围中,定义一个windows对象
        objTmp:$("#divTip")
    }
// 那么,通过全局的变量,可以在各个自定义的函数中访问改变了。通过变量,实现DOM元素的获取,实现代码如下:
    function TestFun(){
        objPub.objTmp.bind("click",function(){alert("hello");})
        objPub.objTmp.css("width","200px");
        objPub.objTmp.css("background-color","red");
    }
// 以上代码最终实现的功能,与定义局部变量一样。但它却可以被补贴的自定义函数所调用,也可以当成普通的jQuery对象使用。

  在使用变量缓存jQuery对象时,有以下两个地方需要我们在编写代码时注意

a、无论是局部还是全局性的变量,为了避免与其他变量名相冲突,原则上,请尽量使用“$”符号进行命名,代码如下所示:

window.$objPub = {    //在全局范围中,定义一个windows对象
  $objTmp:$("#divTip")
}

调用全局变量时,修改后的代码如下:
取,实现代码如下:

function TestFun(){
  $objPub.$objTmp.bind("click",function(){alert("hello");})
  $objPub.$objTmp.css("width","200px");
  $objPub.$objTmp.css("background-color","red");
}

b、如果在同一个DOM对象中有多个对象的操作,应尽量采用链接式的写法优化调用的代码,因此,上诉调用全局变量的代码最后可修改成下列代码:

$function TestFun(){
  $objPub.$objTmp.bind("click",function(){alert("hello");}).css({"width":"200px","background-color":"red"});
}
posted @ 2013-11-06 10:16  白小虫  阅读(553)  评论(0编辑  收藏  举报