正确使用Prototype，节省额外的100K

Part I: [url]http://thinkweb2.com/projects/prototype-checklist/[/url]
1，错:
[code]
document.getElementById('foo')
[/code]
对:
[code]
$('foo')
[/code]

2，错:
[code]
var woot = document.getElementById('bar').value
var woot = $('bar').value
[/code]
对:
[code]
var woot = $F('bar')
[/code]

3，错:
[code]
$('footer').style.height = '100px';
$('footer').style.background = '#ffc';
[/code]
对:
[code]
$('footer').setStyle({
height: '100px',
background: '#ffc'
})
[/code]

4，错:
[code]
$('coolestWidgetEver').innerHTML = 'some nifty content'
[/code]
对:
[code]
$('coolestWidgetEver').update('some nifty content')
$('coolestWidgetEver').update('some nifty content').addClassName('highlight').next().hide()
[/code]

5，错:
[code]
new Ajax.Request('ninja.php?weapon1=foo&weapon2=bar')
[/code]
对:
[code]
new Ajax.Request('ninja.php', {
parameters: {
weapon1: 'foo',
weapon2: 'bar'
}
})
[/code]

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

7，错:
[code]
Event.observe('myContainer', 'click', doSomeMagic)
[/code]
对:
[code]
$('myContainer').observe('click', doSomeMagic)
[/code]

8，错:
[code]
$$('div.hidden').each(function(el) {
el.show();
})
[/code]
对:
[code]
$$('div.hidden').invoke('show')
[/code]

9，错:
[code]
$$('div.collapsed').each(function(el) {
el.observe('click', expand);
})
[/code]
对:
[code]
$$('div.collapsed').invoke('observe', 'click', expand)
[/code]

10，错:
[code]
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
[/code]
对:
[code]
$$('input.date')
.invoke('observe', 'focus', onFocus)
.invoke('observe', 'blur', onBlur)
[/code]

11，错:
[code]
$('productTable').innerHTMl =
$('productTable').innerHTML +
'<tr><td>' + productId + ' '
+ productName + '</td></tr><tr><td>'
+ productId + ' ' + productPrice +
'</td></tr>'
[/code]
对:
[code]
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
}))
)
[/code]

Part II: [url]http://thinkweb2.com/projects/prototype/?p=3[/url]
1，轻松监听键盘事件
[code]
$('myInput').observe('keyup', function(e) {
if (e.keyCode == Event.KEY_TAB)
doSomethingCoolWhenTabIsPressed();
})
[/code]

2，不需要事件capturing
[code]
$('productInfo').observe('click', displayProductInfo, false); // 'false' could be skipped
$('productInfo').observe('click', displayProductInfo);
[/code]

3，聪明的insert()
[code]
new Insertion.Bottom('blogEntry',
new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate({
name: blogEntry.name,
content: blogEntry.content
})
);
// Insertion class is deprecated - it's recommended to use Element's insert method:

$('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate({
name: blogEntry.name,
content: blogEntry.content
}), 'bottom'); // 'bottom' can be skipped

$('blogEntry').insert(new Template('<div><h2>#{name}</h2><p>#{content}</p></div>')
.evaluate{(
name: blogEntry.name,
content: blogEntry.content
}));
[/code]

4，Form提交
[code]
$('register').observe('submit', function(e) {
Event.stop(e);
$(this).request();
})

$('register').observe('submit', function(e) {
Event.stop(e);
new Ajax.Request($(this).readAttribute('action', {
parameters: Form.serializeElements($(this).getInputs('', 'email'))
})
})

$('register').observe('submit', function(e) {
Event.stop(e);
new Ajax.Request(this.readAttribute('action'), {
parameters: Form.serializeElements($(this).getElements()
.reject(function(el) {return el.hasAtrribute('multiple')})
);
})
})

$('register').observe('submit', function(e) {
Event.stop(e);
new Ajax.Request($(this).readAttribute('action', {
parameters: Form.serializeElements($$('#register input:not([multiple])'))
})
})
[/code]

Enjoy prototyping!