기본적으로 prototype.js가 기본으로 설치가 되고
그동안 prototype.js로 ajax나 기타 기능들을 사용하고 있었다.
(사실.. 기타 기능은 거의 쓰지 않고 순수한 자바스크립트만을 쓰고 있었다..)
이번 프로젝트에서는 JQuery를 한번 써보기로 하였다. 충실하게...
JQuery로 스터디를 막.. 시작하는 것도 한몫하였지만...
우선 확 JQuery에 호감을 가지도록 한것은 플러그인이 정말 다양하고 마음에 드는것이 많다.
예를 들어서 개인정보를 보고 수정을 하려고 하는데
나는 새로 바뀐 전화번호만을 바꾸고 싶은데 기존에는 전체 정보를 수정 form으로 바꾸고 전화번호를 수정하였는데
view 화면에서 바꾸고 싶은 부분을 클릭, 더블클릭, 마우스 오버등의 이벤트를 통해서 변경하고 바꾸는 것이다.
그리고!!!! 해당 화면의 reload가 없어서.. 서버의 부하도 줄일수 있다.
지금 프로젝트의 특성상 메인화면에 많은 기능들이 있기에 수정할때마다 메인화면을 reload하면
이런 저런 비용이 많이 들텐데... 그것을 확!!! 줄일수 있다.
inline edit에서 약간 부족한 기능(변경되는 정보의 중복체크..등)은 구글링해서..
얻은 정보에 내가 또 수정해서 쓰는등..(이건 다음에 포스팅하겠다) 정말 활용도 100%로 잘 써먹고 있다.
그리고 그동안의 피곤한 자바스크립트 코딩의 패러다임을 완전히 바꾸고 있다. ^^
물론 이렇게 바꾸기 위해서 부족한 지식의 짜맞추기가 힘들지만.. JQuery의 스터디가 끝나고 프로젝트가 끝나고
다음 프로젝트부터는 정말로 깔끔한 코드로 만들수 있을것이다.. (흠.. 너무 심한 구라인가? ^^)
몇개의 코드를 공유해보자면..
check box가 여러개 있을때 전체 체크를 하려면?
$('#selected_games > input:checkbox:not(checked)').attr('checked', 'checked');
select box를 textarea처럼 펼쳐놓고 내용(option)을 맨 마지막에 추가, 선택된 부분을 삭제하려면?
<select id='total' multiple><option>.... </option></select> 일때
추가는
var op_size = $('#total > option').size();
$('#total')[0].options[op_size] = new Option;
$('#total>option:eq('+op_size+')').attr({value:'새로운값',text:'새로운값'});
선택된것의 삭제는
var selected_index = $('#total > option').index($('#total > option:selected'));
$('#total')[0].options[selected_index] = null;
아.. 꼴랑 2~3줄로 완성이 되다니..
물론 아직 공부를 덜해서.. 더 깔끔한 방법이 있는지 모르겠지만.. 이정도로도 충분히 만족스럽다..
약간 힘든것은 에러가 발생하였을때 JQuery가 자체적으로 이것을 먹어버려서.. 디버깅이 힘들긴 하지만
어느정도 숙달이 되고 완성된 단계로 올라서게 되면 초강력, 깔끔한 자바스크립트의 코드들이 되지 않을까..
사랑해요~ JQuery
