2007/12/13 22:24
2007/12/13 22:24 2007/12/13 22:24

훌륭한 자바스크립트 라이브러리인 Prototype.js 잘 사용하고 계신가요?

http://thinkweb2.com 에서는 두번에 걸쳐 Prototype.js의 올바른 사용법에 대해서 포스팅 한 적이 있습니다.
소개 된지 좀 되었지만 몇가지는 계속 까먹게 되는군요

1편
http://thinkweb2.com/projects/prototype-checklist/

2편
http://thinkweb2.com/projects/prototype/2007/08/12/how-well-do-you-know-prototype-part-ii/

간단하게 소개 하면 다음과 같습니다.

1. document.getElementById('foo') 대신 $('foo') 를 사용 할 것

2. var woot = $('bar').value 대신 var woot = $F('bar') 를 사용 할 것

3.
$('footer').style.height = '100px';
$('footer').style.background = '#ffc';

대신

$('footer').setStyle({
 height: '100px',
 background: '#ffc'
})

를 사용 할 것

4.  
$('coolestWidgetEver').innerHTML = 'some nifty content'

대신

$('coolestWidgetEver').update('some nifty content') 를 사용 할 것

5.
new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')

대신

new Ajax.Request('ninja.php', {
 parameters: {
  weapon1: 'foo',
  weapon2: 'bar'
 }
})

를 사용 할 것

6.

new Ajax.Request('blah.php', {
 method: 'POST',
 asynchronous: true,
 contentType: 'application/x-www-form-urlencoded',
 encoding: 'UTF-8',
})

대신

new Ajax.Request('blah.php')

사용 할 것

7.
Event.observe('myContainer', 'click', doSomeMagic)

대신

$('myContainer').observe('click', doSomeMagic)

사용 할 것

8.

$$('div.hidden').each(function(el){
 el.show();
})

대신

$$('div.hidden').invoke('show')
이올린에 북마크하기(0) 이올린에 추천하기(0)
Trackback Address :: http://blog.phpdic.com/trackback/6
Tracked from Art of Programming | 2008/09/25 16:41 | DEL
요즘 prototype 관련 글에 prototype.js 올바르게 사용하자라는 글이 돌아다닌다. 대부분 맞는것이기에 하다. 그러나. 객체지향적인것도 좋기야 하지만, 가장 중요한건 얼마나 명시적으로 다가오냐이다. 이벤트 등록에 관해서 그 부분이 두드러진다. 소스 여기저기서 객체마다 observe 하는게 나을까. Event 구역에서 다 등록하는게 나을까. 흠 .. $('a').observe('click', function(...)); .. $('b')...
편현장 | 2008/09/25 16:42 | PERMALINK | EDIT/DEL | REPLY
흠 저 외국 친구가 어떤 분인지는 모르겠지만..
적어도 1.6.3 버젼에서 7번 항목은 아니지 싶습니다.
객체지향적인 느낌도 좋지만. 이벤트의 경우에는 Event 네임스페이스를 사용하는게 이벤트 등록이구나는게 명확하게 티나죠.
물론 그것보다도 ie 에서는 항상 작동하지 않는다는 것에 문제가 있습니다.
[로그인][오픈아이디란?]
Name
Password
Homepage

Secret
◀  *    1   ...   31    32    33    34    35    36    37    38    39    *  ▶