Tag: prototype

이번엔 Prototype이라는 Javascript Framework에 대해 하나하나 정리해 보도록 하겠습니다.

메소드 단위로 간단하게 어떻게 사용하는지 정도를 정리할려고 하는데 이것만 봐도 큰 도움이 될것이라 생각합니다.

정리는 Prototype의 최신버젼인 1.6을 기준으로 합니다.

1. $

이 명령은 엘리먼트의 id값을 입력하면 매치되는 엘리먼트를 찾아 리턴하는 함수 입니다. Prototype에서 제공하는 DOM 확장 함수를 상속(상속이라 보긴 어렵지만 상속을 흉내내고 있습니다) 받아 그 결과가 반환됩니다.
id뿐만 아니라 엘리먼트를 인자로 넣어도 마찬가지로 Prototype DOM 확장 함수들을 상속받아 그 결과가 반환됩니다.

[code]$(id | element) // 엘리먼트가 반환됩니다.
$((id | element) …) // 다수의 id나 element를 입력할 경우 동일한 수의 엘리먼트 배열이 반환됩니다.[/code]

느끼신 분도 있겠지만 자바스크립트 Native Function의 document.getElementById 와 동일한 일을 합니다.
document.getElementById(‘id’) -> $(‘id’) 이렇게 줄일 수 있다니 정말 편하고 좋군요!

해당 함수가 어떻게 작동을 하는지 볼까요?
[code]function $(element) {
  // 입력된 인자가 2개 이상이라면
  if (arguments.length > 1) {
    // elements라는 배열을 만들어 인자 수 만큼 순환
    for (var i = 0, elements = [], length = arguments.length; i < length; i++)
      // 입력된 인자를 다시한번 재귀 호출로 자기 자신을 호출하여 그 결과를 elements 배열에 넣음
      elements.push($(arguments[i]));
    // 결과 리턴
    return elements;
  }
  // 입력된 인자가 1개 이하라면 해당 인자가 문자열인지 확인한다
  if (Object.isString(element))
    // 모두들 아실 document.getElementById 입니다.
    element = document.getElementById(element);
  // 가져온 element를 Prototype Element를 상속받아 반환합니다.
  return Element.extend(element);
}[/code]

2. $$

이녀석은 CSS 셀렉터라고 불리우는 녀석입니다. 매우 편리하며 또 강력하고 보통 작업에 앞서 필요한 모든걸 해낼 수 있는 강력한 녀석입니다.

하지만 http://mootools.net/slickspeed/ 의 테스트 결과를 보시면 아시겠지만 여러 CSS 셀렉터를 제공하는 JS Framework중에 Prototype은 극악의 퍼포먼스를 보여줍니다.

그러므로, 사용은 자제하도록 합시다. 물론 필요한 부분에선 사용해야겠죠^^

그래도 다행인게 1.5시절에는 사용할려고 쳐도 무언가 엄청나게 복잡했었는데 1.6들어 딱 보면 무엇을 뜻하는지 알 수 있을 정도로 단순화 되고 명시적으로 바뀌었습니다.

CSS 셀렉터는 $()와 거의 같은 일을 하지만 다양한 조건을 두고 원하는 엘리먼트를 가져올 수 있습니다.

[code]$$(‘div’);
// -> document에 존재하는 모든 DIV 엘리먼트를 가져옵니다.
// -> document.getElementsByTagName(‘div’)와 동일합니다.

$$(‘#contents’);
// -> 이것은 $(‘contents’)와 동일합니다.
[/code]

이것은 Protptype의 Element 클래스의 getElementsBySelector 메서드와 동일합니다.

[code]<ul id=“fruits”>
  <li id=“apples”>
    <h3 title=“yummy!”>Apples</h3>
    <ul id=“list-of-apples”>
      <li id=“golden-delicious” title=“yummy!” >Golden Delicious</li>
      <li id=“mutsu” title=“yummy!”>Mutsu</li>
      <li id=“mcintosh”>McIntosh</li>
      <li id=“ida-red”>Ida Red</li>
    </ul>
    <p id=“saying”>An apple a day keeps the doctor away.</p>
  </li>
</ul>[/code]

[code]$(‘apples’).getElementsBySelector(‘[title=”yummy!”]’);
// -> [h3, li#golden-delicious, li#mutsu] 배열이 반환 됨

$(‘apples’).getElementsBySelector( ‘p#saying’, ‘li[title=”yummy!”]’);
// -> [li#golden-delicious, li#mutsu, p#saying] 배열이 반환됨

$(‘apples’).getElementsBySelector(‘[title=”disgusting!”]’);
// -> [] 빈 배열이 반환됨[/code]

ul 이하의 li들을 prototype 상속을 받은 map 형식으로 리턴할려면 다음과 같이 해야 하지만 셀렉터는 더 쉽습니다.

[code]var nodes = $A(someUL.getElementsByTagName(‘li’)).map(Element.extend);
var nodes2 = someUL.getElementsBySelector(‘li’);[/code]

다시한번 완벽하게 알아볼겸 복습해 볼까요?

[code]<ul>
  <li id=”yellow”>홍길동</li>
  <li class=”blue”>이순신</li>
  <li title=”nice”>유관순</li>
</ul>[/code]

[code]$$(‘li’);
// -> [li#yellow, li.blue, li] 배열이 반환됨

$$(‘li#yellow’);
// -> [li#yellow] #은 id를 뜻함. li 엘리먼트 중에 yellow라는 id를 가진 엘리먼트를 찾아 반환함

$$(‘#yellow’);
// -> [li#yellow] yellow id를 가진 엘리먼트를 찾아 반환함

$$(‘li[title=nice]’);
// -> [li] 배열 반환
// -> [] 으로 감싼 부분은 속성을 뜻함. li객체중에 title속성의 값이 ‘nice’ 인 엘리먼트를 찾아 반환

$$(‘[title=nice]’);
// -> [li] 배열 반환
// -> 모든 엘리먼트중에 title속성의 값이 ‘nice’인 엘리먼트를 찾아 반환[/code]

마지막으로 prototypejs.org에 있는 예제도 한번 보도록 하죠.

[code]$$(‘#contents a[rel]’);
// -> 모든 a 엘리먼트중에 contents라는 id를 가지고 rel 속성을 가지고 있는 엘리먼트 반환

$$(‘a[href=”#”]’);
// -> 모든 a 엘리먼트중에 href 속성이 #인 엘리먼트 반환

$$(‘#navbar a’, ‘#sidebar a’);
// -> 모든 a 엘리먼트중에 id가 navbar거나 sidebar인 엘리먼트 반환 [/code]

3. $A

이 함수는 배열과 비슷하게 순서를 가지고 반복 처리 가능한 값을 가지고 있지만 배열은 아닌 값을 배열로 바꿔주는 역할을 합니다.

실제로 이 함수는 Array 클래스의 form 메서드와 같습니다.

예로 잘 알고 계실 DOM 메서드인 document.getElementsByTagName() 의 결과는 배열로 반환하지 않습니다.

반환되는 노드리스트를 배열로 바꾸어 보도록 하겠습니다.

[code]var paras = $A(document.getElementsByTagName(‘p’));
paras.each(Element.hide);
$(paras.last()).show();[/code]

document 이하의 모든 p 엘리먼트를 찾아서 Element 상속을 받고 마지막 엘리먼트를 show()하는 명령문입니다.

하지만 신기하게 $()와 달리 반환된 값에 다시한번 Element상속을 받아야 하는군요. $()함수는 자동으로 상속받아 반환되는데 말이죠.

실제로 $A()함수는 Element 상속을 하지 않습니다. 그래서 반환되는 전체 배열을 한꺼번에 상속하기 위해서는 다음과 같이 사용하면 됩니다.

[code]$A(document.getElementsByTagName(‘p’)).map(Element.extend).invoke(‘hide’); [/code]

invoke는 배열이나 Enumerable한 객체들의 하나하나의 엘리먼트들에게 개개별로 명령을 내리는 함수입니다.

위의 과정을 거치면 모든 p 엘리먼트는 사라지겠네요.

$A() 함수의 소스를 한번 봐볼까요?

[code]function $A(iterable) {
  // 입력된 값이 빈 값을 경우 빈 배열을 반환
  if (!iterable) return [];
  // Prototype의 메서드인 toArray가 있을 경우 해당 메서드를 실행하여 반환
  if (iterable.toArray) return iterable.toArray();
  // 입력된 값의 길이를 가져온다. 없을 경우 0으로 함
  // results라는 이름의 배열을 생성한다
  var length = iterable.length || 0, results = new Array(length);
  // 새로만든 results 배열로 값 복사
  while (length–) results[length] = iterable[length];
  // 결과 반환
  return results;
}[/code]

마지막으로 prototypejs.org의 예제를 보죠.

[code]// 어려운 방법
function showArgs() {
  alert(Array.prototype.join.call(arguments, ‘, ‘));
}

// 쉬운 방법
function showArgs() {
  alert($A(arguments).join(‘, ‘));
} [/code]

4. $F

이 함수는 Form과 관련된 함수입니다. 정확하게는 Form.Element 클래스의 getValue 메서드의 참조입니다.

Form.Element는 폼과 관련된 엘리먼트만을 제어하는 클래스입니다.

해당되는 엘리먼트로는 input, select, textarea가 있습니다.

$F를 사용하지 않고 특정 값을 가져오는 방법은 다음과 같은 방법이 있습니다.

[code]var form = $(‘contact’);
// -> contact 라는 id를 가진 form을 가져옴

var input = form[‘company’];
// -> form 이하의 name이 company 폼 엘리먼트를 가져옴

Form.Element.getValue(input);
// -> 폼 엘리먼트의 값을 가져옴

// 혹은 다음과 같은 짧은 방법이 있음
$(input).getValue();[/code]

하지만 이 모든걸 간단하게 해결할 수 있습니다.

[code]$F(input);[/code]

괜찮아 보이나요? 여기서 중요한건 엘리먼트를 직접 인자로 넣어주거나 id명을 입력해 주어야 합니다.

prototype의 소스를 봐보죠.

[code]var $F = Form.Element.Methods.getValue;[/code]

실제로 $F의 실체는 없고 getValue 메서드를 참조하고 있군요.

getValue를 봐봐야 겠습니다.

[code]Form.Element.Methods = {
  getValue: function(element) {
    // 입력받은 엘리먼트를 Element 상속 받음
    element = $(element);
    // 엘리먼트의 tagName을 소문자로 바꾸어 method에 저장
    var method = element.tagName.toLowerCase();
    // Form.Element.Serializers 클래스 이하의 method 메서드를 수행함
    // Form.Element.Serializers.method 라고 하면 진짜 method를 찾겠죠
    // 이와 같이 하면 동적으로 메서드를 호출할 수 있음
    return Form.Element.Serializers[method](element);
  }
}[/code]

이쯤 되면 저 Serializers가 궁금해 지는군요. 조금 길긴 하지만 봐보죠.

[code]Form.Element.Serializers = {
  input: function(element, value) {
    // 엘리먼트의 타입을 확인
    switch (element.type.toLowerCase()) {
      case ‘checkbox’:
      case ‘radio’:
        // 체크박스와 라디오는 다음의 메서드를 다시한번 호출하여 결과를 반환
        return Form.Element.Serializers.inputSelector(element, value);
      default:
        // 기타 나머지는 textarea로 판단
        return Form.Element.Serializers.textarea(element, value);
    }
  },

  inputSelector: function(element, value) {
    // value 값이 없으므로 엘리먼트의 checked값이 참이면 value를 반환하고 거짓이면 null 반환
    if (Object.isUndefined(value)) return element.checked ? element.value : null;
    else element.checked = !!value;
  },

  textarea: function(element, value) {
    // value값이 없으므로 엘리먼트의 value값이 반환
    if (Object.isUndefined(value)) return element.value;
    else element.value = value;
  }
};[/code]

보시면 아시겠지만 input의 type이 checkbox와 radio일 경우를 제외한 모두를 textarea와 동일하게 처리합니다.

5. $H

이 함수는 크게 설명할 것이 없는 녀석인것 같네요. 일반 Object를 Hash로 바꾸어 줍니다.

바꾸는 과정은 전적으로 Hash의 생성자에게 맡겨 버리네요.

prototype 소스를 볼까요?

[code]function $H(object) {
  return new Hash(object);
};[/code]

주석을 달려고 봐도 달 곳이 없네요. 썰렁하죠?

6. $R

이 함수는 별로 쓸모 없는 듯 하면서도 매우 유용한 함수입니다. 실제로 많은 prototype 애용자 분들이 거의 안쓰는 유틸리티 함수일 겁니다.

시작과 끝을 정해주면 배열 형태의 ObjectRange 객체를 반환합니다. 다음의 예제를 보시죠.

[code]$R(0, 10).include(10)
// -> true 반환, 10이 포함되어 있는지 확인
$A($R(0, 5)).join(‘, ‘)
// -> ‘0, 1, 2, 3, 4, 5’
$A($R(‘aa’, ‘ah’)).join(‘, ‘)
// -> ‘aa, ab, ac, ad, ae, af, ag, ah’
$R(0, 10, true).include(10)
// -> false 반환, 10이 포함되었나 확인하는 명령문, 3번째 인자가 true로 10이 포함되지 않음
$R(0, 10, true).each(function(value) {
   // 10번 실행되며 value값은 0부터 9까지 증가
}); [/code]

위의 예제만 보아도 아셨겠지만 첫번째 인자는 시작할값, 두번째 인자는 종료 값, 세번째는 true 혹은 false를 인자로 받으며 종료 값을 포함할지 말지입니다.

true로 하면 종료 값은 포함되지 않습니다.

ObjectRange 값은 Enumarable 클래스역시 포함하고 있으며 해당 메서드를 사용할 수 있습니다.

toArray라던가 max(), min() 같은것 역시 사용할 수 있습니다.

7. $w

신기하게도 이번의 함수는 소문자 w이네요. 잘 알아두시기 바랍니다.

이번 함수 역시 희안하게도 별로 안쓰이는 녀석입니다. 하지만 확실히 생각해 보면 prototype개발자가 별로 쓸모없는 기능을 유틸리티로 끌어내진 않았겠죠.

잘 생각해 보면 정말 괜찮은 기능입니다. 문자열의 모든 whitespace(공백, 탭, 줄바꿈)를 기준으로 문자열을 분리하여 배열로 반환합니다.

[code]$w(‘apples bananas kiwis’)
// -> [‘apples’, ‘bananas’, ‘kiwis’] 배열 반환[/code]

예제만 보셔도 알겠죠? 정말 간단하고 단순한 함수네요. 그렇다면 이것으로 무엇을 할 수 있을까요?

[code]$w(‘apples bananas kiwis’).each(function(fruit){
   var message = ‘I like ‘ + fruit;
   // 메시지와 함께 무언가를 처리
})[/code]

솔직히 써놓고 보니깐 조금 민망하네요. 적으면서 스스로도 무언가 쓸데없는 짓을 한 기분입니다.

그럼 실용 예제를 볼까요.

[code]$w(‘ads navbar funkyLinks’).each(Element.hide);[/code]

위와 같이 하면 ads, navbar, funkyLinks라는 id를 가진 엘리먼트를 숨기는 작업을 할 수 있습니다.

하지만!!!!!!!!!!!!!!

[code][‘ads’, ‘navbar’, ‘funkyLinks’].each(Element.hide);[/code]

이게 더 좋아보이는 이유는 뭘까요……..

아무튼 소스라도 한번 보도록 하겠습니다.

[code]function $w(string) {
  // 입력된 값이 문자열이 아닐경우 빈 배열 반환
  if (!Object.isString(string)) return [];
  // 일반 프로그래밍의 trim에 해당하는 문자열 좌우 공백 제거
  string = string.strip();
  // 문자열 값이 있으면 정규식 \s(whitespace)로 split, 없다면 빈 배열 반환
  return string ? string.split(/\s+/) : [];
}[/code]

8. Try.these

매우 멋지고 훌륭한 유틸리티 함수입니다. 많이들 모르시는거 같던데 무엇인가 살펴보죠.

Try.these를 보고 try~catch 를 생각하신 분들이 있을 것 같네요. 비슷합니다.

하지만 조금 다른게 있다면 try~catch는 실행중에 에러가 발생하면 catch로 던져 버리는 반면

Try.these는 실행되는 놈들을 찾을때까지 계속 해본다는것이 조금 다릅니다.

prototype에서 Ajax클래스 관련해서 사용한 부분에 다음과 같은 부분이 있습니다.

[code]getTransport: function() {
   return Try.these(
     function() { return new XMLHttpRequest() },
     function() { return new ActiveXObject(‘Msxml2.XMLHTTP’) },
     function() { return new ActiveXObject(‘Microsoft.XMLHTTP’) }
   ) || false;
}[/code]

Try.these 함수의 인자로는 다수의 함수가 들어갑니다.

정확한 작동원리는 정상적인 객체를 반환하는 함수를 찾을때까지 에러를 발생시키지 않고 다음 함수를 실행합니다.

위의 예제는 크로스 브라우징을 위해 브라우저가 무엇인지를 판별하지 않고 적절한 객체가 반환될때까지 다른 함수를 수행합니다.

1번의 성공이 있으면 다음을 수행하지 않고 종료합니다.

undefined 혹은 null등의 값이 반환되면 다음의 함수를 수행합니다.

크로스 브라우징 등이나 피치못할 사정으로 이 방법이 잘 안되면 다른 방법을 사용하기 위해 사용할 수 있는 함수 입니다.

위의 예제에서는 3개의 함수가 모두 실패할 경우 false를 반환하는군요.

좋은 방법은 아니지만 혹시라도 정말 특이한 어쩌다 한번씩 발생하는 에러인데 잡을수가 없다면 이렇게 할 수 있겠죠.

[code]Try.these(
  function() {
    // 원인을 알 수 없는 에러가 나는 부분
  },
  function() {
    // 에러가 발생할 경우 이 함수로 대체
  }
);[/code]

사실 적어놓고 보니깐 정말 안좋은 예제군요. 이렇게 하라고 만든 함수가 아닐텐데 ㅡㅡ+