写出高性能的JQuery

一个糟糕的Jquery可能会影响到整个页面的渲染更或是请求耗时很长，这样的网页展示，我想是用户不愿意看到的。

1.取消没必要的频繁的获取Jquery对象，这个在Java编程里我想一样：

// 糟糕
h = $('#element').height();
$('#element').css('height',h-20);
// 建议
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

2.用局部变量代理从JQuery对象中获取属性

// 糟糕
$element = $('#element');
h = $element.height();
$element.css('height',h-20);
// 建议var
$element = $('#element');
var h = $element.height();
$element.css('height',h-20); 

3.通过绑定事件来代替直接用事件：

// 糟糕
$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');
})

4.合并重复的函数操作：

合并函数：
// 糟糕

$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

// 建议

$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

5.使用链接

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

6.基于5做一些代码格式优化，增加可读性

// 糟糕
$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);
	

7.避免使用一些容易出错的形式：

<a href="#"/> # 这里指的是返回页面top，虽然没有深究，但是在项目中真心踩过坑。
尽量使用<a href="javascript:;">，当然也有喜好用<a href="javascript:void(0);">//javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。

8.对于一些常见问题的解释:

//一下操作并不是按钮失效，因为onclick="return false"只能阻止a标签href属性中的网址（或代码）执行,可以理解成让一个a标签的页面跳转失败
$("#id").on("click",function(){return false;});

版权声明：本文为博主原创文章，未经博主允许不得转载。