Prototype에서 jQuery로 옮겨타기

Size: px

Start display at page:

Download "Prototype에서 jQuery로 옮겨타기"

한별 봉
5 years ago
Views:

1 Created by Firejune at 2008/11/10, Last modified 2016/09/11 Prototype에서 jquery로 옮겨타기 jquery는 겸손한(unobtrusive) 자바스크립트를 위한 자바스크립트 라이브러리다. jquery는 태생적으로 BDD(Behavior driven development) 방법론을 지향하고 CSS 셀렉터를 사용하여 HTML 문서를 훓는 방법(traversing)에 기반한다. 반면에 Prototype은 태생적으로 CDD(Class driven development)를 지향하고 쉽게 자바스크립트 개발할 수 있도록 해준다. Prototype 라이브러리는 Ruby on Rails에서 아주 잘 지원되고 많은 헬퍼 함수들을 가지고 있다. - 내가 Prototype에서 jquery로 옮긴 이유 중에서... jquery.js에서 $()를 호출할때마다 거대한 jquery객체를 만들어내지는 않는다. jquery 객체들은 prototype-based-inheritance를 통해서 jquery를 상속받은 클론들이다. 이런 클론들은 delegation pointer를 가지고 원본(prototype)의 property와 method들을 참조하기 때문에 무겁지 않다. - Prototype vs jquery 중에서... Prototype기반으로 만들어진 프로젝트를 jquery로 옮기고 있습니다. jquery로 만들어진 것을 Prototype용으로 컨버전(conversion) 하는 작업은 간간히 해 왔지만 이런 경우는 처음이네요. 위와 같은 이유들도 있겠지만 조금 더 보태자면 야속하게도 약 9개월 동안 이렇다 할 업데이트가 이루어지지 않는 것과 지금은 jquery가 대세이기 때문이기도 합니다. 요즘 배포되는 자바스크립트 플러그인들을 보면 대부분이 jquery기반이라 것을 눈여겨 보지 않아도 알 수 있을 정도입니다.

2 Prototype에서 jquery로 컨버전하는 동안 주요한 변경내역을 기록해 보았습니다. 참고로 처음에 위치한 코드가 Prototype이고 아래쪽에 위치한 것이 jquery의 코드입니다. DOM selector $('element'); //=> DOM element object $('#element'); //=> jquery(array-like Object) object $('element'); //=> DOM element object $('#element').get(0); //=> DOM element object $('element1','element2','element3'); //=> Array $('#element1,#element2,#element3'); //=> jquery object element.down('div.item'); //=> DOM element object element.children('div.item'); //=> jquery object element.up('div.contents'); //=> DOM element object element.parent('div.contents'); //=> jquery object element.up('div.container'); //=> DOM element object element.parents('div.container:first'); //=> jquery object element.next('div.item'); //=> DOM element object element.next('div.item'); //=> jquery object element.previous('div.item'); //=> DOM element object element.prev('div.item'); //=> jquery object element.select('div.item'); //=> Array element.find('div.item'); //=> jquery object $('element').select('input[type="button"]'); //=> Array $('#element input[type=button]'); //=> jquery object

3 $$('#element a[href=#]')[0]; //=> DOM element object $('#element a[href=#]')[0]; //=> DOM element object element.select('input.cancel', 'input.submit', 'a.close'); //=> Array element.find('input.cance,linput.submit,a.close'); //=> jquery object element.nextsiblings('div.item'); //=> Array element.nextall('div.item'); //=> jquery object element.previoussiblings('div.item'); //=> Array element.prevall('div.item'); //=> jquery object 초반에 가장 이해하기 힘든것이 DOM 선택자였는데, '$'가 마치 오퍼레이터(operator) 처럼 사용되는 것은 비슷합니다. Prototype의 '$'는 보통 document.getelementbyid의 대역으로 사용되며, Element.prototype의 메서드들을 상속시키는 역할인 반면 jquery의 '$'는 CSS 선택자와 동일한 룰을 가지고 있으며, Prototype의 select 메서드를 혼용하거나 $$유틸리티를 사용하는 효과가 발생합니다. 단순히 선택 방법만 틀린것이 아니라 처리방법 역시 다릅니다. jquery의 '$'선택자에 의해 선택된 DOM 요소들은 배열화된 객체(Array-like Object)로 관리되는데 이것을 보통 'jquery 객체'라고 부르더군요. jquery에서 제공하는 여러 체인 메서드들은 jquery 객체화한 다음에야 비로소 혼용될 수 있습니다. 만약, Prototype과 마찬가지로 DOM 요소를 반환하게 하려면 'jquery 객체에 get(0)' 또는 '[0]'을 사용해야 합니다. 이 것은 더이상 체인 메서드를 사용할 수 없는 상태가 되기 때문에 '$'를 다시 호출하는 등 사용성 및 가독성을 떨어트릴 수 있으므로 가급적이면 변수에 할당하여 사용하거나 체인 메서드로 모두 처리할 것을 권장하고 있습니다. Prototype의 'down'과 'up'에 해당하는 'children'과 'parent'메서드는

4 서로 차이를 보입니다. Prototype의 경우 자식/부모 노드들을 순차적으로 검색하여 발견되는 첫번째 노드를 반환하는 반면, jquery는 첫번째 자식/부모 노드중에서 일치하는 것만을 찾아 반환합니다. 때문에 이를 대체하기 위해서는 때때로 'find'와 'parents'메서드를 혼용해야 할 필요가 있습니다. Event var expand = function(event) { event.element(); //=> DOM element object event.target; //=> DOM element object event.pointerx(); //=> absolute horizontal position for a mouse event event.clientx; //=> absolute vertical position for a mouse event event.pointery(); //=> absolute horizontal position for a mouse event event.clienty; //=> absolute vertical position for a mouse event event.stop(); // stop bubbling event.stoppropagation(); // stop bubbling }; element.observe('mouseup', expand); //=> DOM element object element.bind('mouseup', expand); //=> jquery object document.observe('dom:loaded', expand); //=> document object $(document).ready(expand); //=> jquery object element.stopobserving('mouseup', expand); //=> DOM element object element.unbind('mouseup', expand); //=> jquery object element.observe('click', expand); //=> DOM element object element.click(expand); //=> jquery object

5 Prototype에 익숙한 사용자라면 bind가 눈에 띨 것입니다. jquery에서 bind는 Prototype의 observe와 동일한 메서드로 볼 수 있습니다. 이 밖에도 jquery는 편이성을 위해 jquery 객체에 체인되는 이벤트 메서드들(keypress, mouseover, dblclick 등)을 제공하고 있습니다. Element element.remove(); //=> removed DOM element object element.remove(); //=> removed jquery object var img = new Element('img',{src:'/images/sample.gif',id:'my-img',alt:'img'}); //=> DOM element object var img = $('<img src="/images/sample.gif" id="my-img" alt="img">'); //=> jquery object var el= new Element('a',{href:' 'ClickMe!'); //=> DOM element object var el = $('<a href=" class="link">').html('clickme!'); //=> jquery object element.update('<p>hello!</p>'); //=> DOM element object element.html('<p>hello!</p>'); //=> jquery object element.insert({top:img}); //=> DOM element object element.prepend(img); //=> jquery object element.insert({bottom:'<p>hello!</p>'}); //=> DOM element object element.append('<p>hello!</p>'); //=> jquery object element.insert({before:el}); //=> DOM element object element.before(el); //=> jquery object element.insert({after:'<p>hello!</p>'}); //=> DOM element object element.after('<p>hello!</p>'); //=> jquery object

6 DOM 요소를 파싱할 때 주로 다루게 되는 메서드들입니다. jquery에서는 DOM 요소의 선택자로 사용되는 '$'를 그대로 재사용하여 엘리먼트를 생성하는 모습은 매우 인상적입니다. Style element.setstyle({width: '100px'}); //=> DOM element object element.css({width: 100}); //=> jquery object element.getstyle('width'); //=> '100px' element.css('width'); //=> '100px' element.getwidth(); //=> 100 element.width(); //=> 100 element.getheight(); //=> 100 element.height(); //=> 100 element.hide(); //=> DOM element object element.hide(); //=> jquery object element.show(); //=> DOM element object element.show(); //=> jquery object element.addclassname('active'); //=> DOM element object element.addclass('active'); //=> jquery object element.removeclassname('active'); //=> DOM element object element.removeclass('active'); //=> jquery object element.hasclassname('active'); //=> DOM element object element.hasclass('active'); //=> jquery object element.toggleclassname('active'); //=> DOM element object element.toggleclass('active'); //=> jquery object

7 엘리먼트 스타일과 관련해서는 서로 비슷한 양상을 보이지만, jquery의 경우 'css'메서드를 통해서 스타일을 부여하는 것과 값을 읽어내는 것이 동시에 이루어지고 있다는 점에서 차이가 있습니다. Enumerable elements.each((function(element, index) { //=> DOM element object, index }); elements.each(function(index, element) { //=> DOM element object, index }); elements.invoke('remove'); elements.remove(); 배열 객체를 다루는데에는 두말할 나위 없이 jqeury가 10점 만점에 10점입니다. 단, Prototype과 달리 jquery에서 each를 사용할 때 주의할 점은 index와 반환요소의 순서가 뒤바뀐 것 입니다. Ajax var form = $(formelement); new Ajax.Request(form.action, { method: form.method, paramitors: form.serialize(), onsuccess: function(transport) { //=> transport object(text or JSON or XML) }, onfailure: function(transport) {},

8 oncomplete: function(transport) {} }); $.ajax({ url: form.get(0).action, type: form.get(0).method, data: form.serialize(), success: function(transport) { //=> transport string or json object or xml node }, error: function(transport) {}, complete: function(transport) {} }); 응답해더의 'content-type'에 따라 결과물을 자동으로 분석하여 반환하는 Ajax 로직은 서로 닮았습니다만, jquery의 경우는 응답결과에 따라 자료형이 변경되어 넘어오는 반면, Prototype은 transport객체에 모든 상황이 반영되어 넘어옵니다. Effect element.fade({duration: 0.5}); // => instance of effect element.fadeout(500); //=> jquery object element.appear({duration: 0.5}); // => instance of effect element.fadein(500); //=> jquery object element.slideup({duration: 0.5, afterfinish: callback}); // => instance of effect element.slideup(500, callback); //=> jquery object element.slidedown({duration: 0.5, afterfinish: callback}); // => instance of effect element.slidedown(500, callback); //=> jquery object element.morph({

9 style: 'width: 100px; height: 100px; opacity: 0.5;', duration: 0.5, transition: Effect.Transitions.linear, afterfinish: callback }); // => instance of effect element.animate( {width: 100, height: 100, opacity: 0.5}, // style properties 500, // duration 'linear', // easing callback ); //=> jquery object jquery는 Scriptaculous의 effect.js를 포함해야 지만 가능한 몇몇 애니메이션 효과를 추가작업 없이 사용할 수 있습니다. 애니메이션 코어를 내장하고 있기 때문입니다. 1차원적인 계산에서 그치는 Scriptaculous의 transition과는 달리 jquery의 easing은 p, n, firstnum, diff 총 4개의 인자로 구성되는 계산식은 매우 독창적인 변화를 만들어 낼 수 있는 구조를 가지고 있습니다. 그리고 jquery에는 Scriptaculous를 대신하는 ui.js가 있습니다. 다수의 UI 컴포넌트와 효과들로 구성되어 있으며, 메서드 단위로 파일이 나뉘어 있습니다. Browser detection Prototype.Browser.IE; //=> true or false $.browser.msie; //=> true or undefined Prototype.Browser.Webkit; //=> true or false $.browser.safari; //=> true or undefined Prototype.Browser.Gecko; //=> true or false $.browser.mozilla; //=> true or undefined

10 Prototype.Browser.Opera; //=> true or false $.browser.opera; //=> true or undefined jquery쪽이 더욱 간결해 보이네요. jquery를 사용할 때 가장 만족스러운 점은 싱글 혹은 멀티플 노드의 개념을 떨쳐 버림으로서 찾아오는 강력한 체인 메서드의 연결입니다. 익숙해 지기만하면 상당히 빠른 속도로 코딩을 작렬(?)할 수 있을 것으로 기대되지만, 역시 Prototype의 Class와 bind(function.prototype)를 혼용한 OO 클래스 지향 코딩을 구사할 수 없다는 것이 무척이나 아쉬운 점으로 남습니다. 그래서, Prototype의 쓸만한 코드들을 훔쳐 쓰려고 마음먹고 있죠. * 이 문서는 지속적으로 업데이트 될 예정입니다. Powered by TCPDF (

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 제이쿼리 () 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호 CSS와마찬가지로, 문서에존재하는여러엘리먼트를접근할수있다. 엘리먼트접근방법 $( 엘리먼트 ) : 일반적인접근방법