jQuery 한줄 팁

같은 작업을 해도 코드를 더 줄여보자

전체 폼요소 요소찾기 코드팁 움직임
등록일 :

코드를 최대한 줄여보자

이 예제에서는 코드를 최대한 줄여보는것을 해보겠습니다.
제이쿼리는 같은 코딩이라도 어떻게 줄이느냐의 센스가 필요합니다.

그럼 일단 센스가 제일 떨어지는(?) 첫 예제를 봅시다. ^^;

비교 대상이될 예제

해야할 것
- 닫기 버튼을 누르면 강조된 항목이 초기화
- 그리고 목록이 감춰져야 함

닫기 버튼을 눌러보세요 ^^
그리고 나서 열기 버튼도 눌러보세요 ~
뉴칼레도니아 가고일 도마뱀붙이
살찐꼬리 난장이 여우원숭이
윌리암슨 수액빨이 딱다구리
쿠비어 난장이 카이만
큰꼬리 검은 찌르레기 사촌

CSS

.animals div {
	background-color:#efefef;
	border:1px solid silver;
	margin:3px;
	padding:5px;
}
.animals div.on { /* 선택된 항목 강조 */
	background-color:#999;
	color:#fff;
	border-color:#444;
}

HTML

<div class="animals">
	<div>뉴칼레도니아 가고일 도마뱀붙이</div>
	<div class="on">살찐꼬리 난장이 여우원숭이</div>
	<div>윌리암슨 수액빨이 딱다구리</div>
	<div>쿠비어 난장이 카이만</div>
	<div>큰꼬리 검은 찌르레기 사촌</div>
</div>

<div style="text-align:center;">
	<button type="button" onclick="gogogo()">닫기</button>
	<button type="button" onclick="$('.animals').show()">열기</button>
</div>

자바스크립트

function gogogo(){
	$('.animals .on').removeClass('on'); // animals 클래스 요소안에 on 클래스를 찾아서 그 on 클래스 제거
	$('.animals').hide(); // animals 클래스 요소 안보이게 하기 - display:none;
}


사실 이렇게 해도 큰 문제는 없습니다. 코드도 단순하고 말이죠.
1미터 이동하는데 시속 100km 로 가나 50km 로 가나 뭐 그게 그거인거죠.. (비유가 맞나 ㄷㄷ)
하지만 1km 를 가야한다면 상황은 달라지겠죠..

마음의 소리가 들리지 않나요? 아냐 저건 뭔가 아니야 .. 좀 더 뭐가 있을거야.. 이런..

실행 가능한 소스

캐시를 사용하자 !!

캐시를 사용하는 방법이 있습니다. 어려운건가? 라고 생각할 수 도 있겠지만
예제를 보시면 아무것도 아닙니다.
캐시는 자주 사용하는건 그냥 기억하고 있겠다 뭐 그런 의미입니다.
뉴칼레도니아 가고일 도마뱀붙이
살찐꼬리 난장이 여우원숭이
윌리암슨 수액빨이 딱다구리
쿠비어 난장이 카이만
큰꼬리 검은 찌르레기 사촌

HTML

<div class="animals">
	<div>뉴칼레도니아 가고일 도마뱀붙이</div>
	<div class="on">살찐꼬리 난장이 여우원숭이</div>
	<div>윌리암슨 수액빨이 딱다구리</div>
	<div>쿠비어 난장이 카이만</div>
	<div>큰꼬리 검은 찌르레기 사촌</div>
</div>

<div style="text-align:center;">
	<button type="button" onclick="gogogo()">닫기</button>
	<button type="button" onclick="$('.animals').show()">열기</button>
</div>

자바스크립트

function gogogo(){
	var $el = $('.animals'); // $el 변수에 결과를 담아서 사용합니다. 이 변수를 이용하면 캐시 효과 !
	$('.on', $el).removeClass('on'); // animals 클래스 요소안에 on 클래스를 찾아서 그 on 클래스 제거 ^^;
	$el.hide(); // animals 클래스 요소 안보이게 하기 - display:none;
}

$el = $('.animals') 처럼 변수를 만들어서 사용합니다.
$('.animals') 를 여러번 사용하는 대신 $el 을 여러번 사용하는게 더 이득입니다.
자주 사용한다면 변수로 만들어 두고 그 변수를 가져다 쓰면됩니다.

뭐 두번만 쓸거면 살짝고민이 되겠네요. 세번이라도 ㅎㅎ

※ 예제에서 el 은 element 를 의미하는 줄임말 입니다.

실행 가능한 소스

더더더더~! 좀 더

좀 더 줄여보겠습니다.

뉴칼레도니아 가고일 도마뱀붙이
살찐꼬리 난장이 여우원숭이
윌리암슨 수액빨이 딱다구리
쿠비어 난장이 카이만
큰꼬리 검은 찌르레기 사촌

HTML

<div class="animals">
	<div>뉴칼레도니아 가고일 도마뱀붙이</div>
	<div class="on">살찐꼬리 난장이 여우원숭이</div>
	<div>윌리암슨 수액빨이 딱다구리</div>
	<div>쿠비어 난장이 카이만</div>
	<div>큰꼬리 검은 찌르레기 사촌</div>
</div>

<div style="text-align:center;">
	<button type="button" onclick="gogogo()">닫기</button>
	<button type="button" onclick="$('.animals').show()">열기</button>
</div>

자바스크립트

function gogogo(){
	$('.on', $('.animals').hide() ).removeClass('on'); // 더 줄었죠. ㅎㅎ
	// $('.animals').hide() 는 실행후 $('.animals') 가 반환됩니다.
	// 반환된 $('.animals') 를 다시 재 사용합니다.
	// $('셀렉터', $요소) 이런 방법을 씁니다.
}

$('.on', $('.animals').hide() ).removeClass('on')

캐시는 쓰지 않았지만 원하는것을 간단히 해결했습니다.
$('.animals').hide() 는 실행이 끝나면 $('.animals') 를 반환하게 됩니다.
그걸 그대로 받아서 다시 사용했습니다.

실행 가능한 소스

완벽하게 체인캐스팅으로 가보자

위 예제에서는 $('.on', $('.animals').hide() ) 같은 코딩을 사용했습니다.

체인캐스팅은 한줄로 줄줄이 엮어서 사용하는것 인데요.
위 같은 코드는 한줄로 엮었다라고 보기엔 좀 아닌듯한 느낌입니다.

자 그럼 find 메서드를 사용해서 완벽하게 한줄로 엮어보겠습니다.
뉴칼레도니아 가고일 도마뱀붙이
살찐꼬리 난장이 여우원숭이
윌리암슨 수액빨이 딱다구리
쿠비어 난장이 카이만
큰꼬리 검은 찌르레기 사촌

HTML

<div class="animals">
	<div>뉴칼레도니아 가고일 도마뱀붙이</div>
	<div class="on">살찐꼬리 난장이 여우원숭이</div>
	<div>윌리암슨 수액빨이 딱다구리</div>
	<div>쿠비어 난장이 카이만</div>
	<div>큰꼬리 검은 찌르레기 사촌</div>
</div>

<div style="text-align:center;">
	<button type="button" onclick="gogogo()">닫기</button>
	<button type="button" onclick="$('.animals').show()">열기</button>
</div>

자바스크립트

function gogogo(){
	$('.animals').hide().find('.on').removeClass('on'); // 완벽하게 체인캐스팅 ?
	// $('.animals').hide() 하고 find 메서드로 on 클래스 찾기
}

코드 자체도 굉장히 직관적 입니다.
animals 클래스를 숨기고 on 클래스를 찾은 다음 제거해라.
이렇게 코딩해 두면 여러모로 좋습니다.

실행 가능한 소스

저의 센스는 여기까지 입니다. 더 좋은(!) 코딩 방법이 더 있을거라고 생각됩니다.

제이쿼리가 분명 편하기는 합니다. 정말 편하죠. 하지만 역시 최적화가 중요합니다.
제이쿼리를 마스터 했다고(?) 하더 라도 비슷한 코드를 남발하는 코딩을 한다면 .. 안되겠죠.

매일 매일이 헬로월드인 요즘 ㄷㄷㄷ

이 글이 조금이라도 도움이 되었으면 하는 바램입니다.
즐거운 코딩 되시길 바랍니다.
방문해 주셔서 감사드립니다 !!