当你准备使用jQuery,我强烈建议你遵循下面这些指南:

缓存变量:DOM遍历是昂贵的,所以尽量将会重用的元素缓存。


// 不建议
h = $ ("#element").height();
$ ("#element").css("height",h-20);
// 建议
$ element = $ ("#element");
h = $ element.height();
$ element.css("height",h-20);
                    

使用匈牙利命名法:在变量前加$前缀,便于识别出jQuery对象。


// 不建议
var first = $ ("#first");
var second = $ ("#second");
var value = $ first.val();
// 建议 – 在jQuery对象前加$前缀
var $ first = $ ("#first");
var $ second = $ ("#second"),
var value = $ first.val();
                    

使用on:在新版jQuery中,更短的 on(“click”) 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后,on() 附加事件处理程序的首选方法。然而,出于一致性考虑,你可以简单的全部使用 on()方法。


// 不建议
$ first.click(function(){
$ first.css("border","1px solid red");
$ first.css("color","blue");
});
$ first.hover(function(){
$ first.css("border","1px solid red");
})
// 建议
$ first.on("click",function(){
$ first.css("border","1px solid red");
$ first.css("color","blue");
})
$ first.on("hover",function(){
$ first.css("border","1px solid red");
})
                    

链式操作+可读性:伴随着精简代码和使用链式的同时,可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果。


// 不建议
$ second.html(value);
$ second.on("click",function(){
alert("hello everybody");
}).fadeIn("slow").animate({height:"120px"},500);
// 建议
$ second.html(value);
$ second
.on("click",function(){ alert("hello everybody");})
.fadeIn("slow")
.animate({height:"120px"},500);
                    

短路求值:短路求值是一个从左到右求值的表达式,用 &&(逻辑与)或 ||(逻辑或)操作符。


// 不建议
function initVar($ myVar) {
if(!$ myVar) {
$ myVar = $ ("#selector");
}
}
// 建议
function initVar($ myVar) {
$ myVar = $ myVar || $ ("#selector");
}
                    
Copyright © 2019-2020 2022-09-28 18:40:24