原文
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');

发表订阅


本文听从行文共享CC BY-NC-SA
4.0共谋

互联网平台如需转发必须与自身联系确认。

相关文章

网站地图xml地图