실제로 우리가 Prototype에 대하여 얼마나 잘 알고 있는지 확인하는 시간을 가져봅시다. Juiry Zaytsev씨는 어떤 넌센스한 사람들은 document.getElementById와 Ajax.Request 메서드를 함께 사용하는 것도 목격했다고 하면서 안타까움을 토로하고 Prototype 1.6의 옳은 사용법과 바르지 못한 사용법을 비교하는 포스트(How well do you know prototype)를 작성했습니다.
How well do you know prototype
//바르지 못한 방법:
document.getElementById("foo ")
//적당한 방법: 놀랍게도 어떤 사람들은 이것에 대해 잘 모른다.
$("foo ")
//바르지 못한 방법:
var woot = document.getElementById("bar").value
var woot = $("bar").value
//적당한 방법: 폼 값의 편리하고 빠른 호출
var woot = $F("bar")
//바르지 못한 방법:
$('footer').style.height = '100px';
$('footer').style.background = '#ffc';
//적당한 방법: 모든 브라우저가 W3C의 권고를 따르고 있지 않다.
$('footer').setStyle({
height: '100px',
background: '#ffc'
})
//바르지 못한 방법:
$('coolestWidgetEver').innerHTML = 'some nifty content'
//적당한 방법:
$('coolestWidgetEver').update('some nifty content')
// 아래와 같은 문법 구사가 가능해 지므로
$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()
//바르지 못한 방법:
new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')
//적당한 방법: 보기 좋으며 보다 나은 파라메터 구조 사용
new Ajax.Request('ninja.php', {
parameters: {
weapon1: 'foo',
weapon2: 'bar'
}
})
//바르지 못한 방법:
new Ajax.Request('blah.php', {
method: 'POST',
asynchronous: true,
contentType: 'application/x-www-form-urlencoded',
encoding: 'UTF-8',
})
//적당한 방법: 기본옵션은 생략하라!
new Ajax.Request('blah.php')
//바르지 못한 방법:
Event.observe('myContainer', 'click', doSomeMagic)
//적당한 방법: 논쟁의 여지가 있지만 객체지향적이다!
$('myContainer').observe('click', doSomeMagic)
//바르지 못한 방법:
$$('div.hidden').each(function(el){
el.show();
})
//적당한 방법: 슬프게도 이 사용법을 아는 사람들이 많지 않다는 사실.
$$('div.hidden').invoke('show')
//바르지 못한 방법:
$$('div.collapsed').each(function(el){
el.observe('click', expand);
})
//적당한 방법: invoke를 이용한 이벤트 핸들링, 졸라 쉽다!
$$('div.collapsed').invoke('observe', 'click', expand)
//바르지 못한 방법:
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
//적당한 방법: $$는 오버해드가 크기 때문에 invoke를 사용하면 $$를 여러번 사용할 필요도 없다.
$$('input.date').invoke('observe', 'focus', onFocus).invoke('observe', 'blur', onBlur)
//바르지 못한 방법:
$('productTable').innerHTML =
$('productTable').innerHTML +
'<tr><td>' + productId + ' '
+ productName + '</td></tr><tr><td>'
+ productId + ' ' + productPrice +
'</td></tr>'
//적당한 방법: Template 클래스는 정말 쓸만한 DOM 솔루션이다. 하지만 잘 사용되고 있지 않는 것 같다.
var rowTemplate = new Template('<tr><td>#{id} #{name}</td></tr><tr><td>#{id} #{price}</td></tr>');
$('productTable').insert(
rowTemplate.evaluate({
id: productId,
name: productName,
price: productPrice
}))
)
사실 저 또한 지금까지 몸에 배인 코드를 습관처럼 즐겨쓰기 때문에 새로운 방법에 익숙해지길 꺼려할 때가 있습니다. 하지만 invoke메서드나 Template메서드는 활용 가치가 매우 높다는 사실을 일깨워 주네요. 부록으로 How well do you know prototype Part 2도 참고하세요.
당신은 Prototype에 대하여 얼마나 잘 알고 있나요? - Firejune Blog
