Prototype How Prototype extends the DOM (Prototype으로 DOM을 확장하는 법)

황제낙엽 2011.03.24 15:28 조회 수 : 444

sitelink1  
sitelink2  
sitelink3 http://1 
extra_vars4 ko 
extra_vars5 http://www.graphittie.org/blog/entry/how-prototype-extends-the-dom 
extra_vars6 sitelink1 

Attention for this document이 문서의 이용시 주의사항

이 페이지는 Prototype 공식 홈페이지의 "How Prototype extends the DOM" 문서를 한국어로 번역한 문서입니다. 번역 오류정보 및 기타 제안사항은 제안 및 문의사항 페이지를 통해 보내주시기 바랍니다. 이 문서는 원저작자의 공유 조건인 Creative Commons 저작자표시-동일조건변경허락 3.0 Unported에 따라 이용하실 수 있습니다.

Table of Contents내용목차

  1. Element.extend 메소드
  2. Element.Methods에 사용자 메소드를 추가하기
  3. 내장형 확장기능
상위문서로 이동하기

Content본문

The Element.extend methodElement.extend 메소드

DOM 메소드의 대부분은 Element.Methods 객체에 의해 캡슐화되어(encapsulated) 편리함을 위해Element 객체에 복사된다. 이들 모두는 첫번째 매개변수로서 동작을 수행할 대상이 되는 엘레멘트(element)를 받는다.

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

위의 예제는 간명하고 가독성이 좋기는 하지만 더 개선할 수 있는 여지가 있다. 작업할 대상이 엘레멘트(element)라면 그것에 Element.extend()를 적용함으로써 모든 메소드를 직접적으로 해당 엘레멘트에 복사할 수 있다. 예를 들면, 엘레멘트를 생성하고 다루기 위해서 다음처럼 할 수 있다:

var my_div = document.createElement('div');
 
Element.extend(my_div);
my_div.addClassName('pending').hide();
 
document.body.appendChild(my_div);

메소드 호출이 더 짧고 직관적으로 되었다! 앞서 언급한 대로, Element.extend()는 Element.Methods의 모든 메소드를 대상 엘레멘트에 복사하고 대상 엘레멘트를 복사된 메서드의 첫번째 매개변수로 만들어준다.extend() 메소드는 상당히 지능적이어서 일단 자신에 의해 확장된 엘레멘트에는 중복적용되지 않는다. 더 좋은 점은 달러 함수 $()에 전달되는 모든 엘레멘트 역시 이 방식에 의해 확장된다는 사실이다.

추가적으로, Element.extend()는 폼 엘레멘트에는 Form.Methods를, INPUT, TEXTAREA, SELECT에는Form.Element.Methods를 적용해주기도 한다.

var contact_data = $('contactform').serialize();
var search_terms = $('search_input').getValue();

자동적으로 엘레멘트를 확장해주는 방법이 달러 함수가 유일한 것만은 아니다! Element.extend()는document.getElementsByClassName, Form.getElements, $$() 함수에 의해 리턴되는 엘레멘트들(CSS 셀렉터에 의해 매칭되는 엘레멘트들) 및 기타 여러 곳에서 호출된다. 최종적으로 사용자가 명시적으로Element.extend()를 호출해야 할 기회는 거의 없을 것이다.

Adding your own methods with Element.addMethodsElement.Methods에 사용자 메소드를 추가하기

Prototype에 DOM 메소드를 추가하고 싶은 경우에도 걱정할 것이 없다! Prototype은 이런 요구에 대비하여 준비된 작동방식도 이미 내장되어 있다. 한 객체에 캡슐화되어 있는 일군의 함수가 있다고 가정한다면, 해당 객체를 Element.addMethods에 통과시키기만 하면 된다.

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);
 
$('explanation').truncate(100);

여기서 유일한 주의사항은 추가될 메소드들의 첫번째 매개변수가 반드시 엘레멘트 그 자신이어야 한다는 사실이다. 메소드가 엘레멘트(또는 엘레멘트 자체를 리턴하는 메소드)를 리턴한다면 체이닝 기능(chainability)[1]을 활용할 수도 있다.

Native extensions내장형 확장기능

여기에는 이 모든 것을 뛰어넘는 비밀이 있다.

HTMLElement와 같은 내장 객체의 프로토타입에 메소드를 추가하는 기능을 지원하는 브라우저에서는Element.extent(), 달러 함수 등을 호출하지 않고도 모든 DOM 확장을 기본적으로 적용할 수 있다! 그렇게 된다면 이 확장기능은 브라우저 단계에서 작동하게 될 것이다.

var my_div = document.createElement('div');
my_div.addClassName('pending').hide();
document.body.appendChild(my_div);

내장 브라우저 객체의 프로토타입이 확장된 것이기 때문에, 모든 DOM 엘레멘트는 Prototype 확장기능을 내장하게 될 것이다. 그러나 이것은 HTMLElement.prototype에 대한 접근을 허용하지 않는 IE(Internet Explorer)에서는 사실이 아니다. 앞서 예제가 IE에서 동작하도록 만들기 위해서는 엘레멘트를Element.extend()를 사용하여 확장해야만 한다. 이 메소드는 상당히 지능적이기 때문에 확장기능을 중복적용할까 염려할 필요는 없다.

이 기능을 지원하지 않는 브라우저로 인해 확장된 엘레멘트의 DOM 확장기능을 사용하는 데는 주의가 필요하다. 예를 들면, 위의 예제는 Firefox와 Opera에서는 제대로 동작하겠지만 정말로 스크립트를 명확하게 사용하려 한다면 엘레멘트를 생성한 후에 Element.extend(my_div)를 추가하라. 다음 예제에서처럼 단축명령으로 달러 함수를 사용할 수도 있다.

$('someElement').parentNode.hide()
$($('someElement').parentNode).hide()

이 점을 잊지 말 것! 항상 지원예정인 브라우저에서 테스트 해보라.

1. 체이닝 기능(chainability)
obj.a().b().c()처럼 대상에 메소드를 연속적으로 적용하는 프로그래밍 테크닉. 본문 설명대로 각 메소드가 결과값으로 obj를 되돌려줘야 한다는 것이 필수조건이다. [return]
이 게시물을
목록
쓰기 태그