专栏首页九彩拼盘的叨叨叨jQuery 最佳实践(译)

jQuery 最佳实践(译)

原文 http://shichuan.github.io/javascript-patterns/#jquery-patterns

重复查询

通过链式写法来避免重复查询。

例如

$("<div class='baaron' />")
    .appendTo(document.body)
    .click(function() {});

追加内容

追加的内容如果是多个元素,那么先拼接这些元素的html的字符串,然后追加字符串

例如

// string concatenate and set innerHTML
var myhtml = '';
$.each(reallyLongArray, function (count, item) {
        myhtml += '<li>' + item + '</li>';
});
$('#ballers').html(myhtml);

元素上存数据

元素上存数据的模式和反模式

//  不推荐
$(elem).data(key, value);
// 推荐
$.data(elem, key, value);

上下文和查找

抓取元素时,推荐使用find而不是用上下文

例如

$('.a', $('.b'));
$('.b').find('.a');

移除

当要对某个元素内容做一些复杂的修改时,先移除元素,处理好了,再追加回来

例如

var table = $('#some-table');
var parent = table.parent();
table.detach();
table.addLotsAndLotsOfRows();
parent.append(table);

事件委托

用on而不是用live(live这方法已被废除)

缓存抓取的元素

对于被多次使用的元素,用变量来缓存它,避免多次查询

window滚动事件

用户在快速滚动滚轮的时候,会触发很多次windows滚动事件,会导致滚动事件的处理函数的堆积,而造成交互的滞后。

解决方案如下

$(window).scroll(function () {
    if (scrollTimeout) {
        // 清除堆积的事件
        clearTimeout(scrollTimeout);
        scrollTimeout = null;
    }
    scrollTimeout = setTimeout(scrollHandler, 250);
});

简而言之, 高频事件需要用上面的方式控制事件频度。

具体的选择器放右边,不具体的写左边

//不推荐
$('div.data .brad')
// 推荐
$('.data td.brad')

jQuery的选择器是Sizzle是下向上来找匹配的元素的。因此为了提高效率,使用具体的选择器放右边,不具体的写左边这种写法。

通用选择器

避免使用通用选择器(*)

这个主要是从查询效率上考虑。

选择器不用具体的过头

// 不推荐
var arms = $('.data table.attendees td.brad');
// 推荐
var arms = $('.data td.brad');

发布订阅

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 学习纲要:CSS 常用选择器

    Joel
  • 前端学习 第2周 第1天

    Joel
  • Web前端进阶之路: 提升代码质量篇

    初级前端和高级前端有什么差别?在我看来,初级前端关注点在完成功能,高级前端能在完成功能的基础上,做的又好又快。做的好,就是代码质量高,做的快就是开发效率高。

    Joel
  • Android逆向|去除app恶意引流弹窗

    当下app市场发展非常火热,很多厂商凭借自己的创意在app市场中获得了很多利益,由此也萌生出一些不法个体商贩通过逆向他人的app实现某些功能的破解,并以低于厂商...

    算法与编程之美
  • 我是如何学习的,小作文

    landv
  • shell-脚本集合3

    read命令是一个内置命令,用于从终端或文件读取输入(参见表14-1)。read命令读取一个输入行,直至遇到换行符。行尾的换行符在读入时将被转换成一个空 字符。...

    py3study
  • 轻松几步搭建你的私有云

    私有云增加了IT的灵活性,帮助前端用户实现自助式服务。许多企业通往私有云的过程是从虚拟化起步的。从这种角度看,私有云主要是额外增加了一层灵活性,让用户可以自行部...

    静一
  • Spark 与 Hadoop 学习笔记 介绍及对比

    这篇博客将会简单记录Hadoop与Spark对比,HDFS,MapReduce的基本概念,及Spark架构设计,RDD,运行模式。整理起来一起阅读方便我们理解整...

    大鹅
  • PopupWindow自定义位置显示的实现代码

    在Android中弹出式菜单(以下称弹窗)是使用十分广泛的一种菜单呈现方式,弹窗为用户交互提供了便利。关于弹窗的实现大致有以下两种方式AlertDialog和P...

    砸漏
  • Windows下GCC编译环境中文乱码解决方案

    原因简单分析:Windows(中文)默认的字符集是Windows-936(GBK),而GCC编译器默认编译的时候是按照UTF-8解析的,当未指定字符集时一律当作...

    战神伽罗

扫码关注云+社区

领取腾讯云代金券