jQuery 효율적으로 사용하기

한 번 탐색한 DOM을 다시 탐색하게 하지 않기

bad code

$('button').on('click', function() {
 
    // DOM 한번 탐색
    $('.modal').modal();
 
    // DOM 다시 한번 탐색
    $('.modal').addClass('active');
 
    // DOM 또 다시 한번 탐색
    $('modal').css(...);
});

good code

$('button').on('click', function() {
 
    // DOM 한번만 탐색 (체이닝)
    $('.modal')
            .modal()
            .addClass('active')
            .css(...);
});
 
$('button').on('click', function() {
    // DOM 한번만 탐색
    var modal = $('.modal');
 
    modal.modal();
    modal.addClass('active');
    modal.css(...);
});

명시적인 ‘$’식별자를 사용하기

bad code

var first = $('.first');
var second = $('.second');
var value = $first.val();

good code

var $first = $('.first');
var $second = $('.second');
var value = $first.val();

var 체이닝 사용하기

bad code

var first = $('.first');
var second = $('.second');
var value = $first.val();

good code

var $first = $('.first'),
    $second = $('.second'),
    value = $first.val();

문장을 묶어서 가독성이 좋게 하기

bad code

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

good code

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

코드 양 줄이기

bad code

function initVar($myVar) {
    if(!$myVar) {
        $myVar = $('.selector');
    }
}
 
if ( collection.length > 0 ) {}

good code

function initVar($myVar) {
    $myVar = $myVar || $('.selector');
}
 
if ( collection.length ) {}

jQuery 객체를 참조한 변수를 통해 요소 탐색하기

bad code

var $container       = $('.container'),
    $containerLi     = $('.container li'),
    $containerLiSpan = $('.container li span');

var $container = $('.container '),
    $containerLi = $container.find('li'),
    $containerLiSpan = $containerLi.find('span')