骏之城
14-11-07, 03:03 PM
How well do you know prototype
（转发Prototype开发者对Prototype用户出现的一些常见的问题的回答。相信大家看完后，对使用Prototype有更深的认识。原文 (http://thinkweb2.com/projects/prototype-checklist/)在此）
（原文的The wrong way我译成错误的，不是指这个语句是错的，是指使用Prototype的方法不对。原文的格式更好看一些，大家也可以直接看原文。）
1、
错误的：
document.getElemntById('foo')
正确的：
$('foo')
2、
错：
var woot = document.getElementById('bar').value
或
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')
9、
错
$$('div.collapsed').each(function(el){
el.observe('click', expand);
})
正确
$$('div.collapsed').invoke('observe', 'click', expand)
invoke也可以用于集合中所有对象的事件处理。
10、
错
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
正确
$$('input.date')
.invoke('observe', 'focus', onFocus)
.invoke('observe', 'blur', onBlur)
11、
错
$('productTable').innerHTML =
$('productTable').innerHTML +
'<tr><td>' + productId + ' '
+ productName + '</td></tr><tr><td>'
+ productId + ' ' + productPrice +
'</td></tr>'
正确
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
}))
)
（转发Prototype开发者对Prototype用户出现的一些常见的问题的回答。相信大家看完后，对使用Prototype有更深的认识。原文 (http://thinkweb2.com/projects/prototype-checklist/)在此）
（原文的The wrong way我译成错误的，不是指这个语句是错的，是指使用Prototype的方法不对。原文的格式更好看一些，大家也可以直接看原文。）
1、
错误的：
document.getElemntById('foo')
正确的：
$('foo')
2、
错：
var woot = document.getElementById('bar').value
或
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')
9、
错
$$('div.collapsed').each(function(el){
el.observe('click', expand);
})
正确
$$('div.collapsed').invoke('observe', 'click', expand)
invoke也可以用于集合中所有对象的事件处理。
10、
错
$$('input.date').invoke('observe', 'focus', onFocus);
$$('input.date').invoke('observe', 'blur', onBlur);
正确
$$('input.date')
.invoke('observe', 'focus', onFocus)
.invoke('observe', 'blur', onBlur)
11、
错
$('productTable').innerHTML =
$('productTable').innerHTML +
'<tr><td>' + productId + ' '
+ productName + '</td></tr><tr><td>'
+ productId + ' ' + productPrice +
'</td></tr>'
正确
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
}))
)