2008년 3월 19일 수요일

prototype.js, HTMLElement에 method를 추가하기

Firefox에서 prototype.js를 사용하게 되면 prototype의 Element.Methods와 Element.Methods.Simultated 정의되어 있는 method와 property가 HTMLElement.property에 추가되게 됩니다.
  if (F.ElementExtensions) {
    // copy(source, destination)
    copy(Element.Methods, HTMLElement.prototype);
    copy(Element.Methods.Simulated, HTMLElement.prototype, true);
  }
이렇게 추가되게 되면, 다음의 효과를 얻습니다. HTMLElement를 생성할 때, Element.Methods에 정의되어 있는 메소드를 그대로 상속받게 되는거죠. 예를 들면 element를 생성만 했슴에도 Element.Methods에 정의되어 있는 getDimension()에 접근이 가능하게 되는거죠.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="prototype_v1511.js"></script>
    <title>Insert title here</title>
</head>
<body
  onload="var divElm = document.createElement('div');
    alert(divElm.getDimensions);">
</body>
</html>
그러나, IE에서는 HTMLElement 인터페이스(정확히는 HTMLElement 인터페이스를 구현한 Object)에 어떠한 메소드나 프로퍼티 추가를 허락하지 않습니다. 그렇기 때문에 IE에서 위의 코드를 실행하게 되면 동작을 하지 않습니다.
사용자 삽입 이미지

그렇기 때문에, IE에서는 element를 생성할 때, $()로 한 번 감싸주거나 Element.extend를 한 번 더 호출해서 prototype.js의 Element 기능을 추가합니다.

출처: How Prototype extends the DOM

P.S >
다른 분과 IE에서 HTMLElement.prototype 에 접근이 안된다는 얘기를 했더니 그럴리가 없다는 얘기를 하시면서 new로 생성이 안되어서 그렇다는 의견을 얘기한 적이 있었습니다. 그 당시에 실험을 해보고 글로는 안 썼었는데 정리하는 차원에서 추가합니다.

IE에서 몇 가지 실험을 해보면,
alert(HTMLElement);
// HTMLElement 가 정의되어 있지 않다고 에러가 발생합니다. (Element 동일)
즉, HTMLElement에 접근할 수 조차 없게 되겠죠. 그러나, new로 생성하지 못하기 때문에 new가 원인이 된다는 확인해보지 못했었는데요. 곰곰히 생각하다보니 IE에서 img 태그의 경우 new Image()로 생성할 수 있다는 게 생각이 나더군요. 그러나, 역시 Image의 경우에도 prototype에 접근할 수 없었습니다.
alert(Image);  // Object가 뜹니다.
alert(Image.prototype);  // undefined가 나오네요.
결론은 IE에서는 HTMLElement나 Tag에 직접접근할 수 없다고 보는게 맞다고 생각이 됩니다.

댓글 4개:

  1. @엄끼 - 2008/02/25 20:00
    이해 잘 되나요? ^^

    답글삭제
  2. IE에서는 __proto__가 없어서 발생하는 문제일까요..음..

    valueOf, toString 도 YUI에서 _IEEnumFix 를 통해서 IE브라우저에서만 내부적으로 inheritance 해주자나요.



    prototype과 __proto__에 대한 구분도 분명히 해야될 것같고..

    prototype chain과

    __proto__ chain에 대한 부분도 명확히 해야할 것 같고.. 복잡해요..



    Object Layout에 보시면 __proto__와 prototype reference는 분명 다른 chain을 가지고 있구요..

    과연 옷장수님이시라면 detail 하게 정리가 가능하시겠죠??? ^^;;

    저도 스펙 보면서 정리 중입니다.



    조만간? 결과가 나오겠죠?? ^^;;

    답글삭제
  3. @Rhio.kim - 2008/02/26 17:29
    아.. 정리는 했습니다만, YUI 에디터 발표말고도 이클립스 발표도 있어서 정신이 없네요. 글로 쓰는 것은 정리 중이구요.

    답글삭제