var element = document.getElementById(‘someElement’);
now imagine if we are using this type of line 20 times in the code then obviously it will keep increasing the size of the code .. until we can do something magical and reduce the size of the above line.
WOW!!! is it possible ???
- Using the dot as shown in the code above
Using the square brackets like
var element = document[‘getElementById’](‘someElement’);
var $d = document, $gid = ‘getElementById’;
var e = $d[$gid](‘someElement’);
Now you can refer to document as variable $d and getElementById as $gid, so in whole source code document will be referred as $d i.e. 8 bytes to 2 bytes and for getElementById 14 bytes to 4 bytes or even less
Okay ! so now you have understood the concept but the question is how to maintain the readability of the code
the simplest technique to do so is name the variables like this
var $document = document, $getElementById = ‘getElementById’;
Therefore in the code you will see something like this:
This will preserve the readability of the code and when you are done with the project in the final phase when compression is to be achieved you can simply use some text editor to replace the $document with $d and $getElementById with $gid and then run online tools like Closure Compiler or JSMinify or YUI
If you are an experienced programmer you can make use of the Regular Expression to replace the text automatically. I think PHP can be a good language to code such a thing….