Juiry Zaytsev, someone who has used Prototype for almost a year for building dynamic web apps, has experienced many stupid questions raised on the Prototype discussion IRC channel. According to Juiry, that Prototype is only used at about 15% by most developers. Such as those include the 100KB Prototype.js in their web app, but what they use is only the Ajax.Request function, instead of the many short cuts and convenient functions provided by Prototype.
I strongly agree with Juiry, the API Reference is what a great start for most developers, which is the exact way how I picked up Java and PHP before, by referring only to the Java API and PHP doc respectively. Anyway, the following table shows you what functions and shortcut methods that you should use, when you’ve included the 100KB Prototype.js file in your web app, instead of simply wasting resources.
| Wrong way | Right way |
| Remark | |
| document.getElementById(’foo’) | $(’foo’) |
| Definitely no more document.getElementById(’foo’), since you’ve included the 100KB Prototype.js file, then of course you’ll make full use of the short-cut method $(’foo’) to simply your coding! | |
| var w = document.getElementById(’bar’).value var w = $(’bar’).value |
var w = $F(’bar’) |
| Handy shortcut for reading a value of a form control | |
| $(’footer’).style.height = ‘100px’; $(’footer’).style.background = ‘#ffc’; |
$(’footer’).setStyle({ height: ‘100px’, background: ‘#ffc’ }) |
| Since IE doesn’t behave in the W3C way, so only the second construct ensures NO cross-browser glitches | |
| $(’cWidget’).innerHTML = ’some content’; | $(’cWidget’).update(’some content’); |
| One of those simple ones yet quite often forgotten. Juiry suggested chaining is simply cool, such as you can do as follows: $(’cWidget’).update(’some content’).addClassName(’highlight’).next().hide() |
|
| new Ajax.Request(’n.php?w1=f&w2=b’); | new Ajax.Request(’n.php’, { parameters: { w1: ‘f’, w2: ‘b’ } }) |
| Cleaner and better structured parameters definition and I love it! | |
| new Ajax.Request(’blah.php’, { method: ‘POST’, asynchronous: true, contentType: ‘application/x-www-form-urlencoded’, encoding: ‘UTF-8′, }) |
new Ajax.Request(’blah.php’) |
| All the specified options in the wrong way are present in Prototype Ajax.Request by default. So no need to specify it again, therefore your code is shorter and cleaner! | |
nice collection.
I always used something like $(’cWidget’).innerHTML = ’some content’; instead of $(’cWidget’).update(…); and some of the other errors you listed. Cause I was too lazy to read the docs
thanks for the list