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 条评论
登录 后参与评论

相关文章

来自专栏超然的博客

react小结

在react中,父组件给子组件传递数据时,就是以上的方式,通过给子组件设置props,子组件获取props中的值便可完成数据传递。 

941
来自专栏技术博客

Knockout.Js官网学习(value绑定)

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

751
来自专栏大数据

Vue.js常见问题精选(一)

一、数据绑定不一定就是使用双大括号 “{{}}” 语法 我们都知道,Vue.js 最常见的数据绑定方式是使用“Mustache”语法(双大括号),Angular...

2056
来自专栏程序员的知识天地

H5学习从0到1-H5的框架(13)

H5框架语法介绍 :frame:框架对于页面的设计有很大的作用 frameSet:框架集标签定义如何将窗口分割为框架 ,每一个frameset定义一些列行或者列...

1823
来自专栏Google Dart

AngularDart Material Design 选择 顶

可以手动(在模板中)或通过SelectionOptions实例指定选项。 可以通过模板或通过检查选择模型将选项标记为已选择。

1092
来自专栏liulun

自己动手写客户端UI库——事件机制(设计思路大放送)

在上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上, 在这一篇文章中,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 ...

2069
来自专栏大前端_Web

target,currentTarget和this三者的区别

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

2065
来自专栏逸鹏说道

Markdown基础(内含:锚点使用,使用HTML,新页面跳转,目录生成)

如果要语法高亮就在```后面加小写语言名,eg:html,css,javascript,python,cs(csharp)等等

52011
来自专栏十月梦想

vue入门基础详解之父子通讯

子组件需要监控一个事件,然后在实例中执行这个方法就行,函数参数可以传递data,然后在实例中执行改方法!

762
来自专栏python成长之路

Pygame常用方法

5775

扫码关注云+社区

领取腾讯云代金券