编写高性能的jquery代码

1，变量缓存

dom搜索是比较昂贵的，所以记得用缓存功能

// 垃圾代码
h = $('#element').height();
$('#element').css('height',h-20);

// 优秀的代码
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

2，不要使用全局变量

// 垃圾代码
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// 优秀代码
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

3，使用匈牙利语法的变量，就是在变量前面加上美元符合，表示的是Jquery对象

// 垃圾代码
var first = $('#first');
var second = $('#second');
var value = $first.val();

// 优秀代码
var $first = $('#first');
var $second = $('#second'),
var value = $first.val();

4，变量定义尽量在一行，不要多行定义，建议把没有值的放在最后

var 
  $first = $('#first'),
  $second = $('#second'),
  value = $first.val(),
  k = 3,
  cookiestring = 'SOMECOOKIESPLEASE',
  i,
  j,
  myArray = {};

5，使用事件的时候，尽量用on

// 垃圾代码
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

$first.hover(function(){
    $first.css('border','1px solid red');
})

// 优秀代码
$first.on('click',function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
})

$first.on('hover',function(){
    $first.css('border','1px solid red');
})

6，合并函数

// 垃圾代码
$first.click(function(){
    $first.css('border','1px solid red');
    $first.css('color','blue');
});

// 优秀代码
$first.on('click',function(){
    $first.css({
        'border':'1px solid red',
        'color':'blue'
    });
});

7，使用链式结构代码

// 垃圾代码
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
});
$second.fadeIn('slow');
$second.animate({height:'120px'},500);

// 优秀代码
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

8，增强代码可读性

// 垃圾代码
$second.html(value);
$second.on('click',function(){
    alert('hello everybody');
}).fadeIn('slow').animate({height:'120px'},500);

// 优秀代码
$second.html(value);
$second
    .on('click',function(){ alert('hello everybody');})
    .fadeIn('slow')
    .animate({height:'120px'},500);

9，使用短路循环表达式，从左边优先匹配，最后到右边

// 垃圾代码
function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('#selector');
    }
}

// 优秀代码
function initVar($myVar) {
    $myVar = $myVar || $('#selector');
}

10，使用简写

// 垃圾代码
if(collection.length > 0){..}

// 优秀代码
if(collection.length){..}

11，对元素进行大量操作时应选择拆卸，最后在组装在一起

// 垃圾代码
var 
    $container = $("#container"),
    $containerLi = $("#container li"),
    $element = null;

$element = $containerLi.first(); 
//... a lot of complicated things

// 优秀代码
var 
    $container = $("#container"),
    $containerLi = $container.find("li"),
    $element = null;

$element = $containerLi.first().detach(); 
//...a lot of complicated things

$container.append($element);

12，技巧

// 垃圾代码
$('#id').data(key,value);

// 优秀代码
$.data('#id',key,value);

13，使用缓存父元素方法进行子查询

// 垃圾代码
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();

15，避免默认通用选择器

// 垃圾代码
$('.someclass :radio'); 

// 优秀代码
$('.someclass input:radio');

16，尽量用id选择器

// 垃圾代码
$('div#myid'); 
$('div#footer a.myLink');

// 优秀代码
$('#myid');
$('#footer .myLink');

17，不要用多个id选择器

// 垃圾代码
$('#outer #inner'); 

// 优秀代码
$('#inner');

18，不要使用废弃的方法

// 垃圾代码 - live is deprecated

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

// 优秀代码
$('#stuff').on('click', function() {
  console.log('hooray');
});

本文转自：https://modernweb.com/writing-better-jquery-code/

编写高性能的jquery代码

猜你喜欢