NealGrosskopf.com l Common JavaScript Functions

Common JavaScript Functions

Apr 29

Javascript libraries seem to be all the vogue now days. Unfortunately many of them are becoming bloated with features and are growing larger than 50KB. Some developers may only use 10% of the libraries features too. One of the more common features is the dollar sign function i.e. $('element'). Of course I am a bit biased since I am a hardcore CSS person (thanks Jason) so I shy away from JavaScript as much as possible. Over time I have found that JS is necessary and many times the only solution to some problems.

One thing you'll notice with JavaScript programming is the methods and property calls can get quite lengthy. There is a solution to this and that is to create your own custom functions with shorter function names.

Short Named JavaScript Functions:


function gd(e) { return document.getElementById(e); }
function gs(e) { return document.getElementById(e).style; }
function gv(e) { return document.getElementById(e).value; }
function dw(i) { return document.write(i); }

Each of these is simply a shorter way of calling the built in JavaScript functions. By using these you can reduce the file size of of you JavaScript and also increase the legibility. Probably the only con to these functions is there will be a performance decrease since the code will have to do an extra call each time it's used.

If you can think of any other down and dirty JS functions feel free to leave a comment and fill me in.

Sources:

All credit goes to Chris Retlich

Tags: javascript ( Add Tag )

Chris Retlich

Tue. April 29 2008, 7:20:01 PM

Another trick to shorten the code you wrote:

function gd(e) { return document.getElementById(e); } function gs(e) { return gd(e).style; } function gv(e) { return gd(e).value; } function dw(i) { return document.write(i); }

I'm trying to think of some other functions I've made. Perhaps a show/hide toggle function? If I remember any specific functions, I'll try to remember to post them here.

Neal Grosskopf

Tue. April 29 2008, 8:29:31 PM

I debated on doing it that way, but decided not to due to the extra function calls.

Eric Lightbody

Wed. April 30 2008, 3:59:00 PM

Lookie lookie who's posting on your javascirpt post again :)

I think that this works fine for reducing clutter on the page, however it becomes harder for someone editing your code later on. JavaScript developers are going to know what document.getElementById or document.write, etc. are. However, they're not going to know what gd, gs, gv, and dw are.

If it's your own site, then it's a great thing, but if you're developing with a team then I don't know if I'd go this route.

Neal Grosskopf

Wed. April 30 2008, 6:47:37 PM

@Eric: Perhaps there can be a middle ground and it can be limited to the external .js file that the functions are defined in. I can see your point if you have random pages on the site referencing the functions, there meaning would be lost.

I think It's ok if you're calling the functions further down in the same file, so if you didn't know what they meant, you could at least reference them.

p.s I'm using them in this fashion on the Huebsch redesign.

#5

Sat. April 20, 5:48:27 AM

Neal Grosskopf Dot Com A NG Designs Site

Interact