Sunday, March 2, 2008

When to use Prototype's Features, and when not to

Prototype.js comes with a ton of features that makes it easy for you to access the DOM and make things easier for you to code in javascript. Even though useful, some are just overkill and add overhead. Take the following code example:



$('element')
.update('This is some element text')
.setStyle({font-weight: 'bold'});


versus



var ele = document.getElementByID('element');
ele.innerHTML = 'This is some element text';
ele.style.fontWeight = 'bold';



Prototype's Element object uses .update to set the element's text. However, it also parses the text for styles and scripts. Here we just don't need that and innerHTML is preferable. .setStyle also has considerable overhead and should be used sparingly. The preferable method is to use CSS or .addClassName

No comments: