'jQuery'에 해당되는 글 4건

  1. 2016.01.05 (append|prepend...)To 관련 함수의 활용 사례
  2. 2015.02.11 jQuery의 $.map과 map
  3. 2008.01.24 eval vs. Function
  4. 2007.05.25 Interface Elements for jQuery

기술 지원할 때 많은 코드를 보는데 가끔 (append|prepend...)To 관련 메서드을 활용하지 못해 좀 읽기 어렵게 개발하는 경우를 봐서 생각난 김에 정리한다.

(append|prepend...)To 관련 기능은 대부분의 라이브러리에 있지만, 여기선 [jQuery]을 예를 들어 설명한다. 

보통 append, prepend... VS appendTo, prependTo...의 차이를 모르는 사람은 거의 없다.

간단히 설명하면 append는 부모 엘리먼트에 자식 엘리먼트를 마지막 자식 노드로 추가하는 메서드이다. 그래서 $(parent).append(child)는 parent가 앞이고 child가 뒤이고, appendTo는 $(child).appendTo(parent) 처럼 반대다.

그럼.. 예를 들어, 아래와 같은 기능을 구현한다고 생각해보자.

.layer라는 클래스를 가진 엘리먼트를 #parent에 마지막 자식 노드로 추가하는데 fadeIn되어야 한다.
(IE 하위 버전을 지원하기 위해 CSS transform은 사용하지 않는다고 가정하자.)

이런 기능을 구현한다고 하면 내가 본 코드의 패턴 중 하나는 아래와 같다.

var layer = $("<div class='layer'>");
$("#parent").append(layer);
layer.fadeIn();

때론 jQuery을 chaining하기 위해 아래와 같이 사용하곤 한다.

$("#parent").append("<div class='layer'>").find(".layer").fadeIn();

여기서 .layer가 여러 개이면 아래와 같이 개발하는 경우도 있다.

$($("#parent").append("<div class='layer'>").find(".layer")[0]).fadeIn()

마지막을 제외하곤(마지막은 코드 읽기가 어렵다) 위의 방법이 모두 나쁘니깐 개선하면 좋겠다라는 의미로  얘기하기보다  xxxxTo관련 메서드로 아래와 같이 할 수도 있다 정도로 이해해주면 좋겠다.

보통 나는 아래처럼 작성한다.

$("<div class='layer'>").appendTo("#parent").fadeIn();

위의 예로 개발한 경우 xxxxTo을 모르는 경우가 거의 없었지만, 이런식으로 할 수 있다고 제안하면 새롭게 느끼는걸 알 수 있었다. 

정리하면 xxxxTo는 단순히 부모와 자식의 위치를 바꿔서 엘리먼트를 추가할 때  사용한다기 보다 등록하는 엘리먼트을 기준으로 추가 작업을 하기 위해 사용하는 메서드로 알고 있으면 좀 더 다양하게 활용할 수 있다.


마지막으로 실제 사례를 찾고 싶어서 [github]에서 찾아봤는데 비슷한 사례가 있어 소개한다.
아.. github은 advance search가 안되서 정말 아쉽다. 그립다 code.google.com이여.

// 실제 코드
$('body').append('<div class="fyr"></div>').find('div.fyr').findYourRep({apis: 'represent'});

// 개선 코드
$('<div class="fyr"></div>').appendTo('body').findYourRep({apis: 'represent'});


Posted by 전용우

댓글을 달아 주세요

요즘 열심히 jQuery사용해보고 있는데 생각했던 것과 다르게 동작하는 것들을 정리하려고 한다.

오늘 발견한거 $.map[링크], map[링크]의 콜백의 인자 순서와 this, 반환 값이 다르다. 

// $.map
$.map(["a","b"],function(v,i){
 // v = value
 // i = index
 this;//window
 return v+"-";
});
// 반환 값 - Array

// map
$(".some").map(function(i,v){
 // i = index
 // v = value
 this;// v
 return v+"-";
});

// 반환 값 - jQuery // native map ["a","b"].map(function(v,i){ // v = value // i = index this;// window return v+"-"; }); // 반환 값 - Array

jQuery에서는  $.map은 native[링크]처럼 map은 좀 다르게 만들었다. 근데 $.map보다는 map이 native와 비슷한 구조라 헷갈린다.

아마도 map이 만들어지고 나서 $.map을 만들어진것 같다. 이후에 map이 native로 추가된 후 map의 사용법을 가져갈까? 표준 api의 사용법을 가져갈까? 고민하다 $.xx의 함수들은 표준 방법을 선택한 듯.

이런건 라이브러리를 만들면서 항상 고민되는 부분이다. 가장 깔끔한건 모두 표준과 같은 방법으로 맞추는건데 이게 쉬운 일인가? -_-;

map이면 굉장히 많이 쓰는 메서드인데 기존의 파라메터의 순서를 바꾸면 헬게이트 열림.

결국엔 기본 map은 수정할 수 없고, $.map을 map과 똑같이 하는 방법, native처럼 하는 방법 두 가지인데 사실 나였으면 지금의 jQuery방식보다는 $.map을 map처럼 바꿀 것 같다. 혹은 $.map을 지원하지 않거나.

지금의 방식은 모든 사람이 혼란스럽지만, $.map과 map의 사용법이 같다면, native에 map이 있는지 모르고 jQuery만 사용하는 사람한데는 혼란스럽지않다.

사실 그보다는 아예 $.map을 지원하지 않는 방법을 선호한다.





Posted by 전용우
TAG DESIGN, jQuery, map

댓글을 달아 주세요

구글그룹스의 jquery 포럼을 메일로 받아보는데  재미있는 질문이 올라왔다.

어떤 친구의 질문은  jquery을 보면서 공부하고 있는데  fn = eval("false||function(elem){return " + fn + "}");
이런 문법이 있다. 왜 n = Function('elem', 'return '+fn)  이렇게 하지 않고 위와 같이 했냐라는 질문이였다.

처음에 이 질문을 보고 갑자기 나도 왜 위와 같이 했을까 라는 고민을 했다.

eval("false||function(elem){return " + fn + "}"); 이 문장을 보며 의아해 했던 것은 두가지 인데
첫번째왜 Function을 사용하지 않았나?
두번째앞부분에 false||을 사용했는가? 이다.

그래서 jquery를 받아서 eval("false||function(elem){return " + fn + "}"); 이 부분을 찾아봤다.
솔직히 이해를 잘 못했다.(내공 부족)-_-;;
그러다 포럼의 John Resig을 비롯하여 다른 사람들이 올린 글을 보니  이해하기 쉬웠다.

결론은
첫번째Function으로 만들면 scope가 local scope가 아니라 global scope가 되기 때문이라고 한다.
즉 eval("false||function(elem){return " + fn + "}");는 함수 scope안에서 있는것들을 사용할수 있는데 Function은 global 변수를 사용해야 하기 때문이다.

두번째는 약간의 브라우져의 특성때문이다.
우리가 json을 string으로 받아서 보통 eval("("+json+")") 이렇게 처리하는 이유와 비슷하다. 그래서 처음에는 John Resig 위에 방법으로 하다가 ie,opera에서 안되서  어쩔수 없이 eval("false||function("+....+"}") 이와 같은 방법을 했다고한다.

하여간 오랫만에 건진 팁!





Posted by 전용우

댓글을 달아 주세요

Prototype에게는 Script.aculo.us가 있다면 jQuery에게는 Interface Elements가 있다.

prototype이 참 편하고 좋았는데 그중에서 script.aculo.us가 있는게 더쓰기 좋았던 이유였습니다. 하지만 이젠 jQuery에게도 Interface Elements 생겼으니 한번 사용해봐야겠습니다.

script.aculo.us와 비교해서 거의 틀린것이 없습니다.특별한것은 별로 없고 거의 다 있는것이고
없더라고 이미 prototype이용해서 유사하게 나온 component들이라 막 끌리진 않습니다.
하지만 jQuery도 한번 살펴볼겸 한번 갈아 타보고 싶네용.

덧.테크노라티가 이번에 리뉴얼할때 jQuery를 사용했다고 하죠?^^;

Posted by 전용우

댓글을 달아 주세요