Prototype.js
자바스크립트 라이브러리로 브라우저의 자바스크립트 환경을 개선하기 위해 설계한 것이다.
DOM엘리먼트를 확장하고 내장 자료형에 유용한 메서드를 추가하여 클래스 스타일의 oop
(상속을 포함하여)를 할 수 있게 해준다.그리고 Ajax를 좀더 고급스럽게 쓸 수 있도록 해 준다.
Prototype 참고하기 좋은
site :http://www.java2go.net/javascript/prototype/prototype_basic2.html
1. jQuery.js는 jQuery라는 Super(말 그대로 Super 키워드 아님-_-) 객체를 생성하고
그 jQuery 객체로 Dom 객체 핸들링부터 Ajax 통신까지 수행한다.
반면 prototype.js는 기존의 javascript built-in object들을 prototype-based-inheritance를 통해서
기능을 확장시키거나, 기능별로 객체들을 구현해 놓았다.
Element 객체, Class 객체, Ajax 객체 등이 있음.
Number객체에 times같은 메소드를 추가 시켜 놓는다던지..
2. prototype.js에서 사용하는 $()는 Selector임. document.getElementById의 숏컷이라고 볼 수 있지만,
$가 return 하는 객체는 prototype-based-inheritance를 통해서 prototype의 Element의 모든
property와 method를 shallow copy 해온 객체이다. 하지만 jQuery의 $()는 의미가 약간 다르다.
jQuery의 $()는 selector function으로 쓰임과 동시에 jQuery 생성자로 쓰임.
$()를 수행했을 경우 익명의 jQuery객체가 생성된다.
익명의 jQuery객체는 $() 생성자의 인자(스트링, element 객체)를 파싱하고,
넘오온 인자의 조건에 부합하는 element들의 주소를 배열로 가지게 된다.
예를 들어 $("a")는 페이지내의 모든 a태그 dom객체들의 reference를 가지고 있는
jQuery객체를 생성하는 코드이다. $("a")[0]이 참조하고 있는 것은 Dom 트리 구조를 trace했을 때
가장 처음으로 만나는 a태그가 될 것이다. 여기서 유의해야할 점이 있다.
prototype.js의 Dom 객체가 이미 Element 클래스를 상속받았다면 extended라는 flag를 통해서
복사하지 않고 바로 해당 객체를 참조하는 로직만 수행한다.
그래서 $()함수를 통해서 여러번 같은 객체를 참조하는 방법이 합리적이라고 말할 수 있다.
하지만 jQuery에서 $()함수를 통해 같은 객체를 여러번 참조를 해서는 안 된다.
$()함수를 한 번 실행할 때마다 jQuery는 익명의 jQuery객체를 생성하기 때문이다.
따라서 브라우져 메모리 사용을 줄이기 위해서는 여러번 참조해야할 객체의 경우는,
특정 변수에 할당해서 사용하는 것이 합리적이라고 할 수 있다.
한가지 참조할 점.
jQuery.js에서 $()를 호출할때마다 거대한 jQuery객체를 만들어내지는 않는다.
jQuery 객체들은 prototype-based-inheritance를 통해서 jQuery를 상속받은 클론들이다.
이런 클론들은 delegationpointer를 가지고 원본(prototype)의
property와 method들을 참조하기 때문에 무겁지 않다.
위 2가지가 jQuery.js와 Prototype.js의
두드러진 차이점이라고 생각한다.
참고
편견1.프로토타입은 메모리 릭이 많다??
jQuery가 파일사이즈가 작기 때문에 메모리사용량도
적을 것이라는 오해에서 비릇됨.
prototype은 몇 부분의 코드에서 메모리 릭이 발생하는
문제가 오래전부터 지적되었기 때문에 더 오해가 생김.
하지만 프로토타입은 그런 문제들이 빠르게 패치되고 있음.
jQuery도 메모리릭이 발생하는 코드가 많음.
구글 JQuery User Group에 가서 memory leak 검색하면 전형적인
패턴들을 체크할 수 있다.
프로토타입이랑 비슷하게 이벤트 등록하고 해제하는데서 누수가 발생하는 경우가 많음.
편견2. jQuery는 파일사이즈가 작아서 초기 로딩이 빠르다.
jquery와 prototype core의 파일사이즈가 각각 '약' 70kb, 90kb이다.
(가끔 jQuery core와 prototype+scriptaculous를 비교하는 사람들이 있는데,
jQuery 에반젤리스트일듯-_-protoculous와 비교하려면 jQuery+jQueryUI를 해야함 )
그리 크게 차이나 보이지는 않는다. 이 원본을 가지고 공백제거 뉴라인제거에
gzip압축까지 하게 된다면..-_-;;
20-30kb 와 30-40kb 정도이다. 아주 미미한 차이임.
그리고 캐쉬를 사용하면, 파일사이즈 조금 더 작은 것은 큰 메리트가 아니다.
편견3. jQuery가 prototype보다 더 가볍다.
아마도 파일사이즈 때문에 나온 말인 듯. 아래 selector 수행속도의 차이를 보면
아니라는 것을 알 수 있음
