prototype.js 의 Object

 

$ 메소드 출처 : http://run2you.tistory.com/4

 

 

 $ 메소드는 document.getElementById 의 축약형이라고만 생각할수도 있지만 그건 오산이예요~

$ 메소드를 사용하지 않을시

<div id="box">박스예요 ^^</div>

해당 div 를 javascript 로 hide 시키고 싶을시

 

var target = document.getElementById('box');

  

target.style.display = 'none';   

 

이렇게 써야 하죠 이걸 prototype.js 를 사용하여 $ 메소드를 쓴다면

$('box').hide();

간단 하죠!! 단지 document.getElementById 의 축약형이라면 hide 메소드는 도대체 어디서 왔을까요~~

그건 내부적으로 $ 메소드에서 target 이 되는 object 에 기본적으로 필요한 메소드를 연결 시켜놔서 입니다 ^^;;

 

1. function $(element) {   
2.   if (arguments.length > 1) {       
3.     for (var i = 0, elements = [], length = arguments.length; i < length; i++)   
4.       elements.push($(arguments[i]));   
5.     return elements;   
6.   
7.     /*  
8.          인자가 하나 보다 클때라 ^^  
9.          var returnArray = $('box1', 'box2', 'box3');  
10.          이런 경우겠죠 이렇게 여러개의 인자를 한번에 지정해주면  
11.          인자를 length 만큼 $메소드를 각각 호출하고 그 값을 배열에 넣은후 그 배열을  
12.          리턴해 줍니다..  
13.     */  
14.   }   
15.   
16.   if (Object.isString(element))   
17.     element = document.getElementById(element);   
18.   
19.   //넘어온 인자가 문자일 경우 document.getElementById 를 호출       
20.     
21.   return Element.extend(element);   
22.   
23.    /*  
24.       사실 이부분이 element(넘어온 인자)에 Element.method, Element.Methods.Simulated 등의  
25.       메소드를 상속해서 객체 자체에 메소드를 연결 시켜 줍니다..  
26.       이렇게 함으로써 $('box').hide() 를 사용할수 있었던 거죠...  
27.       Element.extend 메소드는 Element 메소드를 다룰때 다루도록 하겠습니다.  
28.    */  
29. }