如何更好的使用jQuery?

选择器的优化

如何提高Sizzle选择器的性能?

不同的选择器引擎解析是不同的

selector

测试地址:http://alexsexton.com/selectors/

我们看到Sizzle的方法与querySelectorAll的方法是一至的

关于querySelectorAll请到MDC查看

下面是我们平常写jQuery时需要注意的:

左轻右重

bad

div.grid2col .column

better

.grid2col td.column

尽量让左边只放一个选择器tag或者Class

如果需要tag.class这种选择器,最好放在右边

ID优先

bad

$(‘#item div.column’)

better

$(‘#item’).find(‘div.column’)

能简则简

bad

div.grid2col .content .column

better

.grid2col .column

DOM操作优化

尽量减少DOM操作

bad

$.each(array, function(){

   var li = ‘<li>’ + item + ‘</li>';

   $(‘#ballers’).append(li);

});

better

var frag = document.createDocumentFragment();

$.each(array, function(){

   var li = ‘<li>’ + item + ‘</li>';

   frag.appendChild(li);

});

$(‘#ballers’)[0].appendChild(frag);

jQuery自身HTML的方法就很多地方用到createDocumentFragment()

or

var tmphtml = ”;

$.each(array, function(){

   tmphtml += ‘<li>’ + item + ‘</li>';

});

$(‘#ballers’).html(tmphtml);

哪里变化封装哪里

bad

if(t1.data(‘active’) === ‘show’){

   t1.hide();

}

if(t2.data(‘active’) === ‘show’){

   t2.hide();

}

better

var elems = [t1, t2];

$.each(elems, function(i, n){

   if(n.data(‘active’) === ‘show’){

       n.hide();

   }

});

注意其中的“===”一般情况下都应该使用“===”而不是“==”。

链式操作

bad

$(‘body’).append(‘<div class=’button’></div>’);

$(‘div.button’).click(function(){…});

better

$(‘div.button’)

   .appendTo(‘body’)

   .click(function(){…});

当需要大量操作DOM时需要先把它卸载

var ul = $("#ul"),

ulparent = ul.parent();

ul.detach();  //1.4新方法

ul.addLotsLi();

ulparent.append(ul);

对条件判断的新方法

通常

if( type === ‘foo’ || type === ‘bar’){}

高效

if(  /^(foo||bar)$/.test(type) ){}

if( ({foo:1,bar:1})[type] ){}

此条目发表在 javascript, 实验室 分类目录,贴了 , 标签。将固定链接加入收藏夹。