'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 전용우