网站重构之精简你的代码
N年前我的导师说,“写代码真的需要天赋。”那我们就从一段代码开始。
命题:取两个数中较大的一个
function GetMax(a,b){
var result=0;
if(a>b){
result=a;
}else{
result=b;
}
return result;
}
看完这段代码,我就想起了学生时代的老师在课堂上讲课的样子,教科书般的标准,毕业后怎么看这代码怎么难受,于是就产生了第二段代码。
function GetMax(a,b){
if(a>b)
return a;
return b;
}
这个看上去貌似舒服多了,但是我觉得它还长怎么办?人类的智慧总是被逼出来的,总会想出办法,于是产生了第三段代码。
function GetMax(a,b){
return a>b?a:b;
}
这三段代码的发展历程就好像小孩儿的成长历程,写代码就是要不断精进,找到一种感觉,有点说不清道不明,总之有一天,你会发现你入道了,然后会追求每一行代码都是perfect,这时候你写代码就正在发起一场革命。有的孩子们总是标榜我今天又写了几千行代码,这个例子充分说明不是代码写的行数越多就越牛B,呵呵。
现在广泛流传的Jquery库,我们要怎样用好这个框架呢,我来分享几个jquery常用的高性能代码吧:
1. 验证某个元素是否存在
$(selector).length
2. 使用jQuery来预加载图像
jQuery.preloadImages = function() {
for(var i = 0; i < arguments.length; i++) {
$("<img />").attr('src', arguments[i]);
}
};
//用法
$.preloadImages('image1.gif', '/path/to/image2.png', 'some/image3.jpg');
3. 包含了某个值文本的元素.
$("p.value:contains('thetextvalue')")
4. 把某个元素放在屏幕中间
jQuery.fn.center = function () {
this.css('position','absolute');
this.css('top', ( $(window).height() - this.height() ) / +$(window).scrollTop() + 'px');
this.css('left', ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + 'px');
return this;
}
//这样来使用上面的函数:
$(element).center();
5. 在jQuery中如何使用.siblings()来选择同辈元素
$('#nav li').click(function(){
$('#nav li').removeClass('active');
$(this).addClass('active');
});
//替代做法是
$('#nav li').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
以上代码抛砖引玉,希望大家能在精简代码的道路上可以早日入道,写出的每一句代码都变成高质量的,优雅的,完美的……
--IT-北北报