[쇼핑몰 리팩토링] 09 JQuery 도입!!!

오직 JQuery라는 Javascript Framework 사용법을 익히기 위해서 의도적으로 진행한 리팩토링이다.

(Framework는 언제나 양날의 검이다...javascript를 구체적으로 몰라도 쓸 수 있으니까.. 유념하자)

 

JQuery API를 통해 쉽게 script구현이 가능하며, 그 방법은 아래와 같다.

 

Step 1. $()를 통해 JQuery객체화 

Step 2. JQuery객체에 API활용

 

+

JQuery를 통해 쉽게 element에 접근하고, API를 적용함으로써 다음과 같은 효과도 얻을 수 있다.

 

예를 들어, HTML element의 attribute에, javascript function을 직접 달아주면 

javascript와 html이 공존하므로 Coupling이 발생한다.

 

==> javascript단에서 HTML element에 접근해서 JQuery객체화, 원하는 기능을 처리

이러한 '접근'은 javascript로도 할 수는 있지만, JQuery를 통해 훨씬 쉽게 Decoupling관계를 만들 수 있다.

---

- JQuery접근법

어쨌든 개발은 API싸움! JQuery의 수많은 API를 잘 사용하기 위해서

API를 적용하고싶은 element에 '접근'하는 것이 핵심이다!

 

JQuery는 CSS의 접근법을 활용한다.

 

1. id로 접근

$( "#stop-log" ).append( "<div>" + msg + "</div>" );

id = "stop-log"인 element에 직접적으로 접근한다.

가장 직관적이고 심플하지만, id는 유일해야하는 식별성이라는 점에서

수많은 element마다 id로 접근하여 하나하나 제어하는 일은 많지 않을 것이다.

 

---

2. element이름으로 접근

td라는 element에 접근했는데

여러 td 중 식별을 위해 background라는 attribute로 한번 걸러주고

그것마저도 2개라서 array로 리턴된 JQuery객체에 인덱스로 접근했다. [0], [1]

	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
			
		$(function(){
			
			$($('td[background="/images/ct_btnbg02.gif"]')[0]).click(function(){
				alert("목록으로 돌아갑니다.");
				$(document.location).attr("href","/product/listProduct?menu=manage");
			});
			
			$($('td[background="/images/ct_btnbg02.gif"]')[1]).bind("click", function(){
				alert("상품을 더 등록하시겠습니까?");
				$(document.location).attr("href","/product/addProductView.jsp");
			});
			
		});
			
	</script>

 

인덱스로 접근한 것은 JQuery객체가 아닌, element이므로

.click / .bind와 같은 JQuery API를 바로 적용할 수 없다.

그래서 $()로 한번 더 묶어서 API를 적용했다.

---

3. class attribute로 접근

 

element들을 그룹짓기 위해 붙인 class attribute를 통해 접근한다.

ct_btn01이라는 class가 붙은 모든 td에 접근한다.

$(function(){
	
	$('td.ct_btn01:contains("수정")').bind("click", function(){
		alert('수정하시겠습니까?');
		fncUpdateProduct();
	})
	
	$('td.ct_btn01:contains("취소")').bind("click", function(){
		alert('상품정보 수정을 취소하시겠습니까?');
		history.go(-1);
	})
	
	
});

 

 

td.ct_btn01로 접근한 element들 중에서도 명확한 식별을 위해 : 노테이션으로 추가정보를 제공하였다.

contains("수정")이라면, 접근한 element들 중에서 text로 "수정"을 갖고있는 것에 접근한다.

<td background="/images/ct_btnbg02.gif" class="ct_btn01" style="padding-top: 3px;">
					수정
</td>   <!-- contains("수정")이라면 요기에 접근! -->

<td background="/images/ct_btnbg02.gif" class="ct_btn01" style="padding-top: 3px;">
					취소
</td>