2007년 9월 14일 금요일

Prototype 은 어떻게 DOM에 대한 확장을 하였는가?

이제 복잡한 DOM코딩은 가라! Prototype만으로 이를 해결한다!

사용자 삽입 이미지
사실상 Prototype에서 가장 주목을 끄는것은 그것이 DOM에 대한 확장성 이다. Prototype은 여러가지 간편한 메소드 (예하면 $()과 같은) 사용자한테 제공하여 DOM에 대한 코딩을 단순화 시켰다.
간단한 예를 들자면 사용자는 단순히 $('comments').addClassName('active').show() 와 같은 코드를 통하여 쉽게 id가 comments인 요소에 active스타일 시트를 추가하고 보여지게끔 한다.(당연 그전에는 hidden상태였겠지)
그렇다면 prototype은 어떻게 이런 쉬운 코딩만으로 DOM에 대한 접근을 가능하게 했을가?

Element.extend() 메소드

거의 대부분의 DOM 메소드들은 Element.Methods 라는 메소드에 의하여 캡슐화 되여지고 이런 엘리먼트 객체로 복사가 되여져 사용이 되여진다.

Element.hide('comments');
var div_height = Element.getHeight(my_div);
Element.addClassName(
'contactform', 'pending');


윗소스를 보면 comment 엘리먼트를 DOM에서 획득해오고 그에대하여 CSS스타일을 적용하는 것이다.
사실 윗소스도 상당히 간편하지만 prototype의 매력은 이뿐만이 아니다.
아래에 다른 예를 하나 더 추가하겠다.

var my_div = document.createElement('div');

Element.extend(my_div);
my_div.addClassName(
'pending').hide();

// insert it in the document
document.body.appendChild(my_div);


소스를 간단히 분석해보면 my_div라는 엘리먼트를 만든다.
다음 Element.extend 메소드에 해당 엘리먼트를 인자로 넘겨주면 Element.extend의 모든 메소드들이 해당 객체에 복사되여져 온다. 이로써 우리는 별도로 메소드 구현이 필요 없이 이미 구현이 되여진 메소드를 그냥 가져다 쓸수 있다.
하지만 실제 구현시 구지 이런 방식으로 엘리머트들에 메소드들을 복사 할 필요가 없다. 단지 $() 를 사용하여서 위와 같은 메커니즘으로 이 모든것을 구현할수 있다.

가령 contactform있다고 가정할 때 이 폼속의 모든 필드 값들을 QueriedString으로 만들어서 넘기고 싶으면 단지 아래 방식처럼 코딩하면 된다.

var contact_data = $('contactform').serialize();


$()를 통하여 contactform은 Element.extend의 모든 메소드들을 상속을 받게 되는데 여기서 serialize가 바로 그중에 한 메소드이다. 이 메소드의 작용은 예전에 포스트내용을 참조하게 쉽게 알수 있는데 바로 폼내의 모든 엘리먼트를 쿼리드스트링으로 만드는 작용을 한다.

Element.addMethods()를 이용하여 사용자 메소드를 추가할수 있다.

Prototype에서 제공해주는 메소드만 사용하여 일부 문제는 해결할수 있을지 모르지만 모든 문제는 해결할수 없다. 즉 사용자 정의 메소드를 추가하고 싶어질거다. prototype은 이런점까지 고려하여 메소드 추가확장기능을 지원한다.

var MyUtils = {
    truncate:
function(element, length){
        element = $(element);
       
return element.update(element.innerHTML.truncate(length));
    },
    updateAndMark:
function(element, html){
       
return $(element).update(html).addClassName('updated');
    }
}

Element.addMethods(MyUtils);

// now you can:
$('explanation').truncate(100);


MyUtils는 사용자 정의 클래스로서 사용자 정의 메소드들을 포함하고 있다. truncate와 updateAndMark 두메소드는 사용자 정의 메소드들로써 Element.addMethods를 통하여 prototype의 Element 클래스에 추가되여 질수 있다.

댓글 없음:

댓글 쓰기