태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

닷넷프레임워크 딥 다이브 - .NET Framework Deep Dive

POST : Javascript / jQuery

prototype vs jQuery

 

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

 

 

 jQuery Ship with Visaul Studio

 http://news.cnet.com/8301-10805_3-10053154-75.html?part=rss&subj=news

jQuery가 Visual studio에 통합된 형태로 배포 될 것이라, .net 플렛폼의 View를 구성하는 javascript library로 jQuery가 , 윈도우에 탑제된 IE가 될 가능성이 90%이상

 

 

 

 

Read to Recommand

http://www.quarkruby.com/2007/11/6/why-i-moved-from-prototype-to-jquery

내가 Prototype에서 jQuery로 옮긴 이유

 

 

이 글은 스프링노트에서 작성되었습니다.

top

posted at

2008/10/13 23:10


CONTENTS

닷넷프레임워크 딥 다이브 - .NET Framework Deep Dive
BLOG main image
닷넷 프레임워크 .NET FRAMEWORK, C# .NET 과 프레임워크 디자인, 아키텍처 설계, ASP.NET 개발 - 인간과 정보의 상호작용에 통찰력을 얻기 위한 블로그 입니다. -성공률이 100%인 프로젝트가 있다고? 거기에는 혁신이 0%일 것이다. ,Google CEO 에릭슈미트
RSS 2.0
공지
아카이브
최근 글 최근 댓글 최근 트랙백
카테고리 태그 구름사이트 링크