欢迎访问晨星博客！

    • 当前位置： 首页 Web前端 正文

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

    |
    评论 5 条
    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. });
    7. // 建议
    8. //新式写法，当然你的事件可以是其他只有修改click点击事件改为其他即可
    9. $first.on(‘click’,function(){
    10.     $first.css(‘border’,’1px solid red’);
    11. })
    当然还有很多这方面的技巧，我会经常给大家分享，有兴趣的朋友可以收藏下我的博客。

    声明：原创文章请勿转载，如需转载请注明出处！

    上一篇
    下一篇
    • 您可能喜欢得内容：
    • 共 5 条评论

    默认头像游客
    请登陆后再发表您的观点吧！

    最新评论

    账号登陆

    快捷登陆
    热搜词