高效jquery(二)

jquery+javascript 辰辰 5527℃ 6评论

选择捷径

 // 糟糕
d = $('#ele').height();
$('#ele').css('height',d-20);

// 建议
$ele = $('#ele');
d = $ele.height();
$ele.css('height',d-20)

避免全局变量

 // 糟糕
$ele = $('#ele');
d = $ele.height();
$ele.css('height',d-20);
$('#ele').css('height',d-20);

// 建议
var $ele = $('#ele');
var d = $ele.height();
$ele.css('height',d-20);

链式操作

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

维持代码可读性

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

利用CDN

CND能保证选择离用户最近的缓存并迅速响应。

 

  • 高效jquery(一)

转载请注明:辰辰个人博客 » 高效jquery(二)

喜欢 (45)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(6)个小伙伴在吐槽
  1. 写的很不错,楼主JQuery玩的很溜
    前端2017-12-26 18:07 回复
  2. 不错的jQuery技巧!!!
  3. 挺好的,但链式操作如果写的过长会影响维护性
    Jean2016-11-02 12:32 回复
  4. 不错谢谢分享
    手机排行榜2016-10-13 03:51 回复
  5. 不错,看完这个收获很大。
    中国演员网2016-08-12 15:46 回复
  6. 不错,看完这个收获很大。
    卢松松博客2016-07-22 20:57 回复