Refactoring Code in to an Object-Oriented Paradigm #2: Objects

This is article number 2 of a series of article, which simply documents my refactoring of some code I originally wrote (pretty poorly) last year. To get the gist of what’s going on. Check the original post – Refactoring Code in to an Object-Oriented Paradigm.

Using Objects

Javascript (and many other languages) has a variable type which, at it’s very simplest, will group other variables, data, even functions together. Usually these should be related to each other. We’ll start by grouping all of those global variables together, and for any variables which don’t need any greater scope than the local scope of that function, we’ll make sure they’re all defined with the var keyword. (I’ve stripped out the top comment for now)

function addLatest() {

var tracks = document.querySelectorAll(".userSong");
autoScrobbler.lastTrackUID = (typeof autoScrobbler.lastTrackUID == "undefined") ? tracks[1].querySelector("input").value : autoScrobbler.lastTrackUID;
for (var i = 0; i < tracks.length; i++) {

var item = tracks[i];
if (item.querySelector("input").value == autoScrobbler.lastTrackUID) {

i = tracks.length;
autoScrobbler.lastTrackUID = tracks[0].querySelector("input").value;

} else {

item.querySelector("input").checked = true;
autoScrobbler.scrobbled++;

}

}
doUserScrobble();
autoScrobbler.countReport.innerHTML = autoScrobbler.scrobbled;

}


function loadThenAdd() {

doRadioSearch();
setTimeout(addLatest, 30000);

}


function start() {

loadThenAdd();
autoScrobbler.loopUID = setInterval(loadThenAdd, 300000);
autoScrobbler.start.disabled = true;
autoScrobbler.stop.disabled = false;

}


function stop() {

clearInterval(autoScrobbler.loopUID);
autoScrobbler.lastTrackUID = undefined;
autoScrobbler.loopUID = -1;
autoScrobbler.stop.disabled = true;
autoScrobbler.start.disabled = false;

}


document.querySelector("#disclaimersContainer").innerHTML += "<div id=\"autoScrobbler\" style=\"background: #FFFFFF; border-top: 1px solid #000000; border-left: 1px solid #000000; position: fixed; bottom: 0; height: 50px; width: inherit;\"><input id=\"autoScrobblerStart\" type=\"button\" value=\"Start auto-scrobbling\" onclick=\"start();\" /> | <input id=\"autoScrobblerStop\" type=\"button\" value=\"Stop auto-scrobbling\" onclick=\"stop();\" /><p><span id=\"autoScrobblerScrobbleCount\">0</span> tracks scrobbled</p></div>";
autoScrobbler = new Object();
autoScrobbler.start = document.getElementById("autoScrobblerStart");
autoScrobbler.stop = document.getElementById("autoScrobblerStop");
autoScrobbler.loopUID = -1;
autoScrobbler.lastTrackUID = undefined;
autoScrobbler.scrobbled = 0;
autoScrobbler.countReport = document.getElementById("autoScrobblerTracksScrobbled");
start();

What we have now done, is grouped all the variables that we need to make the plugin work correctly, under one group, called autoScrobbler. This hasn’t completely solved the problem, all these variables are still accessible globally, however if someone else wants to use the global variable start, the variable that we’re using here won’t be affected, because it’s autoScrobbler object which is variable, so you have to reference autoScrobbler to access and of the variables within it.

If you think about this more, we have created a third scope, now we have our global scope (addLatest() references the doUserScrobble() function for instance, which is accessible globally), we have all the local scope (addLatest() references tracks, which is only accessible within that function, nothing else can access it) and we also have a selection of variables which can only be accessed if you reference autoScrobbler.[variable name]. This is our third scope, and you can also place functions into this group…

That’s it for this article, next we’ll be looking at fully Moving to Object-Oriented code patterns.

Advertisements

Published by

Andrew Bridge

A student web developer with a keen interest in bringing function and form together as one to create a powerful, beautiful experience for users.

One thought on “Refactoring Code in to an Object-Oriented Paradigm #2: Objects”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s