1. DOM을 캐싱하라
- 한번 탐색한 DOM을 다시 탐색하는 것을 비효율적이다.
- 캐싱된 변수를 통해 요소를 탐색하라
var aa = $('#area');
aa.modal();
aa.addClass('active');
2. 명시적인 $ 식별자를 사용하자(Hungarian Notation)
- 헝가리안 표기법 : 컴퓨터 프로그래밍에서 변수 및 함수의 이름 인자 앞에 데이터 타입을 명시하는 코딩 규칙
- jQuery 객체를 참조한 변수 이름 앞에 $를 붙여 jQuery 를 사용 가능한 객체임을 식별하도록 하여 혼란을 감소시키자
var $area = $('#area');
var value = $area.val();
3. 문장을 연결(Chaninng)되도록 묶어서 가독성이 뛰어난 코드를 만들어라
$second
.html(value)
.on('click', function(){alert('hello world');})
.fadeIn('slow')
.animate({height:'120px'},500);
4. 코드의 양을 줄여라
- &&, || 를 활용하자
$area = $area || $('.selector');
5. DOM 조작이 많을 경우, 분리하여 적용하자
- 문서에 붙여진 상태에서 다수의 DOM조작은 비효율적이기 때문에 조작하고 다시 붙이는게 좋다.
var $container = $('.container'),
$containerLi = $container.find('li),
$element = null;
$element = $containerLi.first().detach(); // $element에 다수의 조작이 수행
// detach는 remove와 같으나 제거된 요소를 변수에 담아서 저장할 수 있다.
$container.append($element);
6. 프로젝트의 최종단계에서는 jQuery CDN을 사용하라
- Content Delivery Network 사용시 사용자의 가장 가까운 곳에서 데이터를 가져오기 때문에 속도 향상에 도움이 된다.