Rev. 2.73

자바스크립트 프레임웍 라이브러리인 프로토타입(Prototype)의 업데이트 소식이 있습니다. 이 것은 Sam씨가 개발 중에 있는 CHANGELOG를 토대로 대충 살표본 것이기 때문에 아직 배포된 상황은 아니라고 합니다. 이전 버전과 호환되지 않는 변화가 있는 듯 합니다. 조금 걱정스럽군요...

Element, Form, 그리고 Form.Element의 메서드를 $(“sidebar”).addClassName(“selected”).show(); 와 같이 다중으로 사용할 수 있게 되었습니다. 또한 이전 버전 호환 되도록 구성된 Element.toggle, Element.show, Element.hide메서드는 더 이상 하나의 인수로 한정되지 않습니다.
Element.show(‘page’, ‘sidebar’, ‘content’);
[‘page’, ‘sidebar’, ‘content’].each(Element.show);

위 처럼 복수로 쓸 수 있답니다.(오호~ 단순 반복작업을 효과적으로 줄일 수 있겠군요.) 그리고, Form.Element$()또는 $$()를 혼용하게 됩니다. 지금은 $F()로 구분하여 사용합니다. 그 밖의 내용은 아래와 같습니다.

다중으로 사용할 수 있는 메서드들 :
Element.toggle, Element.hide, Element.show, Element.remove, Element.update, Element.replace,
Element.addClassName, Element.removeClassName, Element.observe, Element.stopObserving,
Element.cleanWhitespace, Element.scrollTo, Element.setStyle, Element.makePositioned,
Element.undoPositioned, Element.makeClipping, Element.undoClipping, Form.reset, Form.disable,
Form.enable, Form.focusFirstElement, Form.Element.focus, Form.Element.select, Form.Element.clear,
Form.Element.activate, Form.Element.disable, Form.Element.enable

- Object.clone 메서드 추가
- Form.Element.disableForm.Element.enable 메서드 추가
- Field is now simply an alias for Form.Element
- Element.Methods.getElementsByClassNameElement.Methods.getElementsBySelector 메서드 추가
- Avoid race condition when stopping an Ajax.PeriodicalUpdater
- 동기식 요청 지원 개선
- Add serialization and observation support for input type=search
- Properly decode query components in String.prototype.toQueryParams
- Array.prototype.reduce 메서드 추가 예) [1, 2].reduce() // [1, 2]
- Object.keysObject.values 메서드 추가
- Simulate non-GET/POST requests by POSTing with a _method parameter set to the actual verb
- Make Element.update() handle TABLE-related elements with the DOM API
- Sync to script.aculo.us unittest.js library as of 2006/08/29
- Add additional unit tests to test/unit/dom.html for testing Element.update and $().update
- Prevent possible exceptions on unloading the page in IE

Event Observing 의 문법
$('element').observe('click', function(e) { alert(e); });

이 글의 원문은 A Flurry of Prototype Updates입니다.

Comments

Got something to add? You can just leave a comment.

  • 백일몽 백일몽

    오.. 변화가 꽤 많네요. 개인적으로 포로토타입에도 xslt 변환에 관한 메서드가 추가됐으면 합니다. 익스와 파폭에 맞게 따로 만들어서 쓰려니 여간 귀찮은게 아니라서

    reply edit

  • 일전에 XML을 클라이언트측 자스로 분석하여 요약정보를 뿌려주는 코딩을 했는데요. 이거 이거 인간이 할 짓이 아니더군요 ㅡ.ㅡ;; 아마도 프로토타입의 노드 관련된 코드는 Insertion 메서드밖에 없지요? 그래서 곰곰히 생각해 봤는데, 프로토타입은 XML과 친하지 않다는 겁니다. ㅡ.ㅡ; 그 이후로는 서버단에서 XML을 분석하고 JASON으로 날려주는 방식을 선호합니다.

    reply edit

  • 신신티 신신티

    안녕하세요 파이어준님 볼거리가 상당히 많고 공감가는 부분이 많아서 상당히 유용하게 보고 있답니다. 한가지 질문할 부분이 있어 글을 올립니다. 다름이 아니라 리뷰중에 구찌 ajax 관련대해서 올리셨는데요. 저도 그전 부터 구찌 ajax 기술을 보고 정말 감탄을 금치 못했습니다. 구찌의 ajax 부분중에 이미지 zoom 부분도 ajax로 구현이 된건지 궁금해서 파이어준님에게 물어 봅니다. 저도 이곳 저곳 돌아 다니면서 이미지 zoom 부분에 상당한 메리트를 느끼는지라 혹시 관련 오픈 소스 사이트나 알고 게시는 부분에 대해 말씀해 주시면 많은 도움이 될듯합니다. =)

    reply edit

  • 저도 시간이 나면 파보려고 벼루고 있던 중입니다. 제품 리스트 화면에서 작동원리는 다음과 같습니다. 해당 제품의 정보를 Ajax로 수신 > Gucci.Zoomer 메서드 작동 순입니다. 작동원리는 프리뷰 이미지의 마우스 이벤트가 발생한 지점을 중앙으로 옮기면서 엘리먼트를 원본이미지 크기로 부드럽게 확대합니다. 확대가 완료되면 메서드의 인자로 넘어간 원본 이미지 주소로 대체되는 것입니다. 그래서 줌하는 용도로는 사실상 Ajax가 사용되지 않습니다.

    클래스로 생성된 Gucci.Zoomer 메서드는 http://www.gucci.com/js/gucci-zoomer.js 안에 있으며 prototype.js와 스크립타큘러스의 effect.js 파일을 참조합니다. 이것은 배포된 라이브러리를 사용한것이 아니라 wollzelle에서 제작한 것입니다.(참조하여 쓰시면 되겠습니다.) Gucci.Zoomer의 인자는 element, full, style, url이며 실제로 사용되는 인자를 훔쳐보니 아래와 같았습니다.

    element='fullImg1'
    full = 'fullImgSrc1'
    style = '167732_CAEEG_7709'
    url='http://s7ondemand5.scene7.com/is/image/Gucci/167732_CAEEG_7709?$zoom2
    $&crop=52,298,1040,1344&op_sharpen=0&resMode=bicub&op_usm=1.0,0.8,5,0'

    이 메서드를 실행시키는 라인은 fx2.js의 123번 라인입니다. 테스트하려면 제품 상세보기 화면에서 아래의 스크립트를 순차적으로 URL 창에 입력해 보세요.
    javascript:var test = new Gucci.Zoomer('fullImg1','fullImgSrc1','167732_CAEEG_7709','');
    javascript:test.zoomIn(Event); // 줌인
    javascript:test.zoomOut(Event); // 줌아웃

    reply edit

  • 신신티 신신티

    너무 상세한 답변에 또한번 감동을 먹었습니다. 정말 잘보았습니다. 상세한 설명까지 ㅠ.ㅠ 감사합니다. scene7.com 에서 솔류션을 지원을 해주는군요. 크;; 저처럼 어리숙한 실력을 가진 사람이라면 이해는 하겠지만 실지적으로 수행하기에는 상당히 어려움이 있군요. t.t 기회가 된다면 파이어준님 상세한 리뷰 부탁드리며 t.t 앞으로도 좋은 정보 부탁드려요 =)

    reply edit

  • 아이구 별말씀을요... 저또힌 덕분에 공부할수 있는 계기가 된걸요~ 힘닫는 것까지 노력하여 기대에 부응하도록 하겠습니다.(저도 어리숙합니다. ㅠ.ㅠ)

    reply edit

  • 하아.. 오랜만에 대문 리뉴얼하면서 prototype을 써봤는데, Firejune님의 툴팁 소스를 살짝 참고해서(-_-) 아주 작고 간단하게 만들어봤습니다. Firejune님 껀 별의별 기능(?)이 다 있어서 상당히 복잡하더군요;;

    어쨌든 이런 라이브러리가 있다는 게 상당히 편하네요. 역시 직접 써봐야 아는 건가..;

    reply edit

  • 와우~ 멋지게 적용하셨군요. Appear / Fade 응용까지.... 저도 daybreaker님의 Appear / Fade 효과를 참고해 봐야겠습니다. ^^;

    reply edit

Your Reaction Time!

captcha

avatar