본문 바로가기

Dev/Web

How well do you know prototype

출처 : http://thinkweb2.com/projects/prototype-checklist/


1
The wrong way:
document.getElementById('foo')
The right way:
$('foo')

Surprisingly some people actually don't know about this one ( including ~100KB file just to use Ajax.Request family )

2
The wrong way:
var woot = document.getElementById('bar').value
var woot = $('bar').value
The right way:
var woot = $F('bar')

Handy shortcut for reading a value of a form control

3
The wrong way: 
$('footer').style.height = '100px';
$('footer').style.background = '#ffc';	
The right way:
$('footer').setStyle({
	height: '100px',
	background: '#ffc'
})

Dreaming about IE behaving W3C way? Not happenning! (but second construct will make you forget about cross-browser glitches)

4
The wrong way:
$('coolestWidgetEver').innerHTML = 'some nifty content'
The right way:
$('coolestWidgetEver').update('some nifty content')

One of those simple ones yet quite often forgotten. Yes, I know they are almost the same but I want to see you doing THIS with the first one
(isn't chaining just cool?)

$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()

5
The wrong way:
new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')
The right way:
new Ajax.Request('ninja.php', {
	parameters: {
		weapon1: 'foo',
		weapon2: 'bar'
	}
})

Cleaner and better structured parameters definition

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

All of these options are in Ajax.Request by default! "method: 'POST'" happens to be on every second pastie page I've seen 
(Still don't believe in JS inheritance? You don't have to. Just take advantage of it)

7
The wrong way: 
Event.observe('myContainer', 'click', doSomeMagic)
The right way:
$('myContainer').observe('click', doSomeMagic)

This one is debatable but second way is more Object Oriented (well... sort of) and easier to chain (So decide for yourself)

8
The wrong way: 
$$('div.hidden').each(function(el){
	el.show();
})
The right way:
$$('div.hidden').invoke('show')

Here's a typical "each overuse". We have invoke for such things, folks! Sadly not many people know about it.

9
The wrong way: 
$$('div.collapsed').each(function(el){
	el.observe('click', expand);
})
The right way:
$$('div.collapsed').invoke('observe', 'click', expand)

Ha! Take this! Invoke can also be used for event handling when iterating over a collection of elements. It's really easy, isn't it?

10
The wrong way: 
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
The right way:
$$('input.date')
	.invoke('observe', 'focus', onFocus)
		.invoke('observe', 'blur', onBlur)

Somehow people tend to forget about "chaining nirvana". Don't like the way it looks? Think about saving some time by NOT invoking $$ twice!

11
The wrong way: 
$('productTable').innerHTML = 
	$('productTable').innerHTML + 
	'<tr><td>' + productId + ' '
	+ productName + '</td></tr><tr><td>' 
	+ productId + ' ' + productPrice + 
	'</td></tr>'
The right way:
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
	}))
)

No I'm not kidding. This has been posted to #prototype and something was wrong with it (hmm... I wonder what)

'Dev > Web' 카테고리의 다른 글

How well do you know prototype  (0) 2008.07.11