[기초강좌] Prototype JS - 2 : Utility
오늘은 바람이 좀 선선하게 불고, 날씨는 흐리고 시원했는데...왜 유독 사무실에서..... 내자리는 이리도 더울까요? 그나마 누군가가 준 미니선풍기로 더위를 살짝 달래고 있습니다. ㅎㅎ
이번엔 PJS에 Utility Method라고 명명된 부분을 해볼까 합니다. 유틸리티라고 해서 거창한건 아닙니다만, PJS에서 많이 사용되고 있는것 중에 하나이므로 알아보도록 합니다.

우선 $메소드에 대해서 알아볼까요?
$메소드는 일단 축약메소드라고 생각하시면 됩니다. 무슨이야기인지 아래의 코드를 봐주세요.

<script>
  function foo(el){
     element = $(el);
     ........
  }
</script>

아직 모르시겠죠? ㅎㅎ 위의 코드를 다시 써보면 이렇게 됩니다.

<script>
  function foo(el){
     element = document.getElementById(el);
  }
</script>

이제 아시겠죠? 그럼 단순히 이것만을 위한 메소드냐구요? 아닙니다. 또 아래를 봐주세요.

<script>
  $('item1', 'item2', 'item3').invoke('hide');
</script>

invoke 메소드가 나왔네요? 여기서는 간단하게만 설명드리겠습니다. invoke(실행할 메소드)의 식으로 사용하며 Enumerable에 속한 메소드입니다. 그러므로 위의 식을 설명드리면 $메소드에 속한 item1~3까지의 엘리먼트들이 hide메소드가 실행되어 화면에서 감춰지는 코드입니다. 어떻습니까? 위의 식을 PJS없이 그냥 코딩한다면 그만큼 코드의 길이또한 길어지게 될 것입니다. 이런면에서 보면 PJS도 어느정도의 프레임워크적인 마인드가 있는 것이라 생각되지 않습니까? ㅎㅎ 하지만 아직도 전 라이브러리라고 생각하고 있습니다. -_-;;

자... 두번째 메소드는 $A 메소드입니다. 이 메소드는 지정한 오브젝트에 대해서 배열로 반환시켜주는 역할을 합니다. 백문이 불여일견

<script>
  var foo = $A(document.getElementsByTagName('p'));
  foo.each(Element.hide);
  $(foo.last()).show();
</script>

어떻습니까? 어떤 메소드인지 느낌이 오시는지요. each메소드도 역시 Enumerable에 속해있는 메소드로 뭔가가 돌면서 반복수행하게 되는 메소드입니다. 나중에 더 자세히 설명하도록 하겠습니다.

세번째 메소드를 살펴보도록 합니다. 바로 $F 메소드인데요, 이 메소드는 아주 단순합니다.

<script>
    var foo = $F(document.getElementById('item1'));
    var bar = $F($('item1'));
</script>

foo, bar 둘다 해당 엘리먼트의 값(value)을 출력하고 있습니다. 첫번째 줄보다 두번째 둘이 더 간단네요. 이게 바로 PJS의 장점중에 하나가 아닐까 합니다.

네번째는 $H 메소드 입니다. 이름에서 H가 뭘 의미할까요? 네 Hash입니다. ㅎㅎ 역시 아래 코드를 보시죠

<script>
  var foo = $H({a:"1", b:"2"});
   alert(foo.keys());
</script>

$H 안에는 해쉬스타일의 오브젝트가 들어가 있네요. 그리고 다음줄에선 keys라는 메소드로 값을 추출하고 있구요, alert을 통해 나오는 값은 a, b가 출력됩니다.

다음 메소드는 $R 메소드 입니다. 여기서 R은 Range의 약자입니다. range는 범위를 나타내구요. 그럼 아시겠지만 범위를 나타내는 축약 메서드 입니다. 역시, 아래의 소스를 보시지요.

<script>
   var bar = $R(0,3);
   alert($A(bar).join(', '));
</script>

여기서 bar는 0 ~ 3까지 오브젝트 범위를 만들어내고, 그것을 위에서 배운 $A메소드를 통해 배열로 다시 변경하고 join을 통해 alert으로 찍히게 됩니다. 즉 값은 "0, 1, 2, 3"으로 찍히게 되는거죠. join 메소드는 따로 설명안해도 아시겠죠? ^^

축약함수의 마지막 이네요. 바로 $w 메소드 입니다(대문자 W가 아니라 소문자 w입니다).

<script>
   var foo = $w('apple banana kiwi');
   alert(foo);
</script>

보시다 시피 $w메소드에 공백(whitespace)으로 구분된 문자열이 들어가있고, 그것을 $w메소드는 공백으로 구분하여 배열로 저장하게 됩니다. 즉, 반환은 Array인거죠.

다음은 Try.these 인데요, 이것은 좀 특이합니다. try - catch에 지겨우신분들은 좋은소식이죠 ^^

getTransport: function() {
  return Try.these(
    function() { return new XMLHttpRequest() },
    function() { return new ActiveXObject('Msxml2.XMLHTTP') },
    function() { return new ActiveXObject('Microsoft.XMLHTTP') }
  ) || false;
}

소스는 위와 같습니다. 만약 getTransport가 호출되면 처음부터 하나씩 실행하면서 에러가 나면 다음 함수를 호출하고, 계속 반복해서 에러가 안나는 함수의 결과를 리턴하게 됩니다. 만약 전부 에러를 발생시킨다면 false를 반환하구요, 우리는 이것을 보통 try - catch로 하고 있는데요, PJS에는 번거롭지 않게 좋은 작업환경을 제공해주고 있습니다.

사실 이번 강좌는강좌라기 보다는 PJS를 설명하는데 꼭 필요한 것에 대해서 알아봤습니다. 좀쉽죠?
하지만 이것을 가지고 구현하는 다음장부터는 좀 어려울지도 모르겠습니다. 전에도 이야기 했는데, 익숙치 않은 방식으로 구현되고 있기때문에 어렵게 느껴지는 것이죠. 익숙해지면 좀 편하게 다가갈 것이구요.

더위를 먹었는지 잠시 글쓰는 것을 멈춰야 할 것같습니다. 좀있음 저녁먹을 시간인데
저녁을 먹고와서 다시쓰던가 해야겠네요.

posted by blankus
태그 - , , ,
Ajax  |  2007/06/05 17:51
Trackbacks  1 | Comments  0
이 글의 트랙백 주소 :: http://www.blankus.net/trackback/10
.
[기초강좌] Prototype JS - 2 : Utility - 나는..죄인이었다.
2007/12/29 17:25 삭제
.
오늘은 바람이 좀 선선하게 불고, 날씨는 흐리고 시원했는데...왜 유독 사무실에서..... 내자리는 이리도 더울까요? 그나마 누군가가 준 미니선풍기로 더위를 살짝 달래고 있습니다. ㅎㅎ이...
이름 ::   비밀번호 :: 홈페이지 :: 비밀글
등록
이전 목록   1   ...  30   31   32   33   34   35   36   37   38   ...  43   다음 목록