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를 상속받은 클론들이다. 이런 클론들은 delegation pointer를 가지고 원본(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 수행속도의 차이를 보면 아니라는 것을 알 수 있음
아래 링크는 jQuery와 Prototype의 selector의 수행속도를 비교해 놓은 것이다.
http://claudio.cicali.org/article/100/prototype-and-jquery-benchmarked
아래 링크는 prototype.js 와 jquery.js의 특징들을 간단하게 비교해 놓은 슬라이드쇼
http://www.chazzuka.com/blog/index.php?p=47&t=jquery-vs-prototype-javascript-framework.html
댓글