写出高效jquery代码的19条指南

2020-05-23 06:16:56易采站长站整理

//… 许多复杂的操作


// better


var
    $container = $(“#container”),
    $containerLi = $container.find(“li”),
    $element = null;


$element = $containerLi.first().detach();
//… 许多复杂的操作


$container.append($element);
12.熟记技巧
你可能对使用jQuery中的方法缺少经验,一定要查看的文档,可能会有一个更好或更快的方法来使用它。

// 糟糕


$(‘#id’).data(key,value);


// 建议 (高效)


$.data(‘#id’,key,value);
13.使用子查询缓存的父元素
正如前面所提到的,DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。

// 糟糕


var
    $container = $(‘#container’),
    $containerLi = $(‘#container li’),
    $containerLiSpan = $(‘#container li span’);


// 建议 (高效)


var
    $container = $(‘#container ‘),
    $containerLi = $container.find(‘li’),
    $containerLiSpan= $containerLi.find(‘span’);
14.避免通用选择符
将通用选择符放到后代选择符中,性能非常糟糕。

// 糟糕


$(‘.container > *’);


// 建议


$(‘.container’).children();
避免隐式通用选择符
通用选择符有时是隐式的,不容易发现。


// 糟糕


$(‘.someclass :radio’);


// 建议


$(‘.someclass input:radio’);
优化选择符
例如,Id选择符应该是唯一的,所以没有必要添加额外的选择符。


// 糟糕


$(‘div#myid’);
$(‘div#footer a.myLink’);


// 建议
$(‘#myid’);
$(‘#footer .myLink’);
15.避免多个ID选择符
在此强调,ID 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。

// 糟糕


$(‘#outer #inner’);


// 建议


$(‘#inner’);
16.坚持最新版本
新版本通常更好:更轻量级,更高效。显然,你需要考虑你要支持的代码的兼容性。例如,2.0版本不支持ie 6/7/8。


摒弃弃用方法
关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。

// 糟糕 – live 已经废弃


$(‘#stuff’).live(‘click’, function() {
  console.log(‘hooray’);
});


// 建议
$(‘#stuff’).on(‘click’, function() {
  console.log(‘hooray’);