jQuery를 효율적으로 작성하는 방법

|

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 사용시 사용자의 가장 가까운 곳에서 데이터를 가져오기 때문에 속도 향상에 도움이 된다.

'JavaScript' 카테고리의 다른 글

$.data  (0) 2021.05.07
Predicate  (0) 2021.05.06
Navigator  (0) 2021.04.09
난독화  (0) 2021.04.05
Coding Convention  (0) 2021.04.02
And