How well do you know Prototype? You should fully utilize it!

<script type=”text/javascript” src=”prototype.js”></script>

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!

More from Juiry’s Prototype Check List

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner


Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “How well do you know Prototype? You should fully utilize it!”


  1. No Comments

Leave a Reply

You must login to post a comment.