Thursday, March 08, 2007

Five (better) Javascript Tools Someone Should Have ...

Sometimes there's a JavaScripter that "teach us" wich function should be on our Top Ten function list.

My first disappointment is that if You use a good library, such jQuery, Dojo, !YUI or MooTools You'll never need these functions because these library probably will have better or more powerful implementation.
However, if You absolutely need a "Top Ten" I think it should be created using best version of each function or prototype (write once and forget them).

Please Read JS manual and Respect Standards
This is a common javascripter error, he probably doesn't know well each official method so he thinks we need its code implementation.

For example the common find Array prototype is, at least in my opinion, a big error because JavaScript 1.5 has its dedicated standard function to do the same thing.

We don't need another prototype to do exactly the same thing of standard function, but if we need a different version we should create a little perfect function, don't You agree with me?

Array.prototype.find = function(re){
var result=[],i=this.length;
while(i--) {
if(re&&re.constructor===RegExp&&re.test(this[i]))
result.push(i);
else if(this[i]===re)
result.push(i);
};
return result.length?result.reverse():false;
};

This function works inline too (less spaces) but please remember (always) to check if another library has its own implementation.

if(![].find)Array.prototype.find = function(){
// ...
}

This is an OpenAjax "compilant way" to make your code unobtrusive and compatible with other libraries too.

The second standard You should respect is method map and any version I've seen respect correctly standard version.
This is a tiny optimized function that should respect them:

Array.prototype.map = function(callback){
for(var i=0,j=this.length,result=new Array(j),self=arguments[1],u;i<j;i++){
if(this[i]!==u)result[i]=callback.call(self,this[i],i,this);
};return result
};

Directly from my ByteFW (Byte Framework) Array normalizer.

So, if we just have some standard method why we should use another not standard version with another name?
In this case a standard compilat browser will work in core (fastest way) while other uncompilant browsers will have, I hope, a method like that so "tomorrow" You'll just delete this function from your Top Ten.


Optimize code and take care about its size
Another example should be a generic formatNumber function, that doesn't require to be complex because it should be just this one:
function formatNumber(num, pref){
function r(s){return(''+s).split('').reverse().join('')};
return(pref||'')+r(r(num).replace(/^(\d+\.)?(\d+)$/,function(num,d,i){return d+i.replace(/(\d{3})/g,'$1,').replace(/,$/,'')}));
};


This function should be more short, more simple and probably more fast than other function You could find over the net ... as, for example, this should be a better and more compact way to know if a variable is an Array and not an Object ...

function isArray(testObject){return testObject&&testObject.constructor===Array};


Wow, "just two checks" ... but it's obvious guy, constructor is there from 5 years or more ...



Make your common function "more realistic"
If You need for example a prototype called htmlEntities why You should create a "specialChar like" proto?

Html Entities should parse every html char and not just ['&', '<', '>'] that aren't all possible htmlentitties.

This is for example a better htmlEntities implementation, or probably a real htmlEntities and not a fake htmlspecialchar ...

String.prototype.htmlEntities = function(){
return this.replace(/[^\x09\x0A\x0D\x20-\x7F]|[\x21-\x2F]|[\x3A-\x40]|[\x5B-\x60]/g,function(e){return '&#'+e.charCodeAt(0)+';'});
};


Choose correctly your "teacher"
He, he ... it's just a joke and I'm absolutely not a teacher but if You want to learn something about JavaScript, please visit Mozilla Developer Center and after that, read code from good libraries "powered by" good developers (jQuery, Dojo, YUI!, others ....
After that Yuo'll never look for a Top Ten "but it's Top Fifteen or Top Twenty" JavaScript post because You'll be able to create them by yourself.

That's all ;-)

1 comment:

kentaromiura said...

My best teacher for javascript was a book, the O Reilly one,
in that book there is all the things one javascripter should know.
The second teacher is the Experience:
You must make errors in something, and not only undestand what was wrong but WHY is wrong, so you grow up and became a better scripter, and you gain exp point
that you need to level up youlself.
Most important things, look and copy, but do not only copy and paste,
try to understand the meaning of what you copy, and try to do it better if you can.