Archived Development Uncategorized

JavaScript refactoring, the n00b way

I’m a bit of a n00b when it comes to doing stuff in JavaScript. So naturally, when I find a way of introducing a bit of efficiency into a JavaScript situation, I’m more than happy to throw it into the mix. My only disclaimer for the below ramblings are that if you’re a developer that knows anything more than the basics, everything I’m about to write will be nothing more than a “Yeah, no shit, genius” kinda thing. So, go easy on me, mmmkay? 🙂

So anyway, my current attempt at web hackery requires a bit of JavaScript, AJAX + the usual suspects that often go along with those things i.e. jQuery Core, jQuery UI, Sass … you get the picture. Nothing unusual going on here … did I mention that I love jQuery?

I tend to write stuff, make it work, carry on to other things and then come back later, look at a block code and throw up in my mouth a little bit when I see how freakin’ ugly and inefficient it is. I mean, seriously, why would you duplicate an almost identical block of JavaScript eleven times when you can do what a real developer would do, and write it properly in the first place?

This example is super-obvious and really aimed at people, like me, who don’t do this stuff professionally but like to learn better ways of doing things. Firstly, here’s a snippet of what I had before.

 $('button.delete').button( { icons: { primary: 'ui-icon-circle-minus' }, text: false }); 

I had that bit of jQuery UI a bunch of times and had to add a new one, whenever a new element came up that required button-ifying … like that? It’s new. 🙂

Needless to say, that’s horribly inefficient as it requires copy/paste/edit for every occurrence.

Not too long ago, I followed along all doe-eyed while Jeffrey Way (@envatowebdev) taught my fellow n00bs and I how to do things properly with jQuery. Objects came up, and a revelation happened. For me, anyway.

So now, instead of duplicating that block of code (the one up there a bit) many times over, I’ve got all my buttons in an array of objects which is then processed and the relevant properties turned into the equivalent of the eleven blocks of rubbish I had before. I’m the first to admit that there will definitely be a better way of doing this, still, but for now I’m happy with the changes.

Here’s how it looks now:

 var buttons = { b1 : { id : 'button.delete', icon : 'ui-icon-circle-minus', text : false }, b2 : { id : 'div#password-submit input', icon : 'ui-icon-check', text : true }, b3 : { id : 'div#profile-submit input', icon : 'ui-icon-check', text : false } } for each ( button in buttons ) { $( ).button( { icons: { primary: button.icon }, text: button.text }); } 

Plug a new button-ifiable element into the array and it’ll automatically processed next time the script runs (and isn’t cached – we’ve all fallen into that that trap).

The result is exactly the same as I was getting before, but, in my opinion, could be called more elegant, efficient, easier to read, whatever.