Wordpress主题交流群:565616228 进群记得看公告!

如何写出高性能的jQuery代码必学知识

文章目录
  1. 查找元素定义变量
  2. 使用.on写事件绑定

最近这段时间学习javascript的别人追的风声四起,从起初的兼容性问题,到现在的热门课程中间经历的不少事情,期间开发者最受追捧的jQuery现在却被加上了性能差的标签,其实相对来说jQuery的性能确实不如javascript,但是呢贵在门槛低,我们只要稍加学习掌握一些javascript基础再加上熟读jQuery开发手册就可以非常轻松的使用jQuery来实现我们的一些动态效果。

其实如果我们使用得当,jQuery的性能也能提高不少,这个关键就是我们如何去写代码,已经对jQuery的了解多少。下面我们就一起来学习一下如何提高jQuery代码编译水平吧!

查找元素定义变量

学习多js的朋友应该都了解DOM遍历是非常影响性能,为了减少遍历的次数我们可以通过定义变量的方法来合并相同的项目操作:

  1. // 糟糕
  2. //用这段代码DOM会遍历2次 
  3. h = $('#element').height();
  4. $('#element').css('height',h-20);
  5. // 建议
  6.  //这种写法会遍历一次
  7. var $element = $('#element');
  8. h = $element.height();
  9. $element.css('height',h-20);

使用.on写事件绑定

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

  1. // 糟糕
  2.  //老式写法,
  3. $first.click(function(){
  4.     $first.css('border','1px solid red');
  5. });
  6. // 建议
  7. //新式写法,当然你的事件可以是其他只有修改click点击事件改为其他即可
  8. $first.on('click',function(){
  9.     $first.css('border','1px solid red');
  10. })
当然还有很多这方面的技巧,我会经常给大家分享,有兴趣的朋友可以收藏下我的博客。
来源:本文由晨星博客原创撰写,欢迎分享本文,转载请保留出处和链接!
评论广告

4条评论

  • 步飞凌云  

    不错

  • 周晓龙  

    一直在关注,不错

  • 青春不恋  

    学习一下

  • 小飞鱼  

    JQ真是很难学 不知道为什么

昵称*

邮箱*

网址