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.
Image may be NSFW.
Clik here to view.
Image may be NSFW.Clik here to view.
