Refactoring and JQuery Questions

So I have a friend that works as a front end dev monitor my code and give me pointers. A lot of times, he ends up giving me info that is way beyond my experience. While reviewing my Tic Tac Toe game he told me to “refactor the **** out of it.” I have also had a web engineer tell me this. Its a little discouraging to have professionals tell you to refactor your code when you are excited that it works. But I am going to look at this as an opportunity to learn. So I am going to ask here, where in the heck do I go to get tips on the basics of refactoring?

My friend has given me tips to rewrite jquery to assign it to variables.

$(".gridz").css("pointer-events", "none");
$("#cX").css("pointer-events", "auto");
$("#cO").css("pointer-events", "auto");

So it would look like this:

var $gridz = $(".gridz");
var $changeX = $("#changeX");
var $changeO = $("changeO");
var cssChange = function (arg1, arg2) {
    arg1.css("pointer-events", arg2);
};
cssChange($gridz, "none");
cssChange($changeX, "auto");
cssChange($changeO, "auto");

I am failing to understand why I would do this. I get cutting out a lot of my repeating code. But when he talks about modulating the entire thing and assigning everything that is jquery to a var. I don’t understand why I would do that. It makes the code harder to read and… well freaking complicated. Which is not the point of the excercise.

So does anyone have any literature that can help point me in the write direction for the basics of refactoring code and tell me if this is correct to change everything from jquery to variables? It just feels like I am getting taught something that I am not ready for, so I am not understanding a damn thing and actually getting a bit more lost. Instead of moving on to Simon, I am stuck looking at this and not seeing anything.

In terms of refactoring, one of the things that I immediately notice are your variable names and jQuery selectors. Now I don’t know anything about the Tic Tac Toe project as I haven’t gotten that far into the fCC curriculum yet, but since I do know how HTML and jQuery works, one of my first questions is: What does “.gridz” refer to, along with “#cX” and “#cO”? And why are those IDs instead of classes, btw? (Rhetorical questions btw, not that you need to respond with the answers.) I could take a reasonably educated guess, based on the info that this code is for a Tic Tac Toe game, but it’s not very clear what that class and those IDs are for, and what elements they’re associated with.

So basically your variable names could afford to be really specific to describe the elements that are being selected by the jQuery. The variable storing “.gridz”, for example, could afford to say in its name exactly what it’s storing along with maybe some info on how it’s related to the HTML structure, so that someone else looking at your code will understand exactly what it is. That’s part of what refactoring is about—helping other programmers to understand what your code does.

There’s also no particular reason for classes, IDs, and variable names to be short in general, no matter the programming language. Don’t be the kind of programmer who uses cryptically-short variable names that leaves other programmers completely mystified. It’s fine if you use things like “foo”, “bar”, “i”, and “j” for experimental test code. But don’t use anything like that in a real project. And don’t use dollar signs on your variable names either, just leave that for the actual jQuery itself.

Btw, the quintessential book on refactoring is this one: https://martinfowler.com/books/refactoring.html

1 Like

Thank you for the info.

Your friend have a point. Refactoring is fancy term for make changes or rewriting code so your script files run faster. Its a way to optimize things.
In the example above main thing is called caching - practically it means if you have code that repeats on a same element putting it into variable will speedup things because jQuery will not go over and over finding that element in DOM tree - you have a reference already stored in variable. That is a pro tip from him. Also function is an elegant way to make code more general - professionally term is abstract. Basically you wrap up all you CSS manipulations in single function and you can pass any variable and any style you want. This is a good coding practice and leads to code reduce. My tip - listen to your friend he knows what he’s talking about.

1 Like

I think you’ve gotten some good answers regarding variable naming and caching, but on the whole I side with you - their advice is unnecessarily complicated. While your CSS class names should definitely be more descriptive, you only need to cache a jQuery variable if you’re going to use it more than once, and that’s really a minor optimization (unless you are using the selector thousands of times, then the optimization is significant). An important lesson to learn, but it’s not like you’ve made some horrific mistake.

That cssChange function really bothers me, though. A whole function to abstract away the string “pointer-events”? Seriously? I could maybe see a case for creating two such functions, one to enable and the other to disable the pointer events:

function setPointerEventsToAuto($elem) {
    return $elem.css('pointer-events', 'auto');
}

function setPointerEventsToNone($elem) {
    return $elem.css('pointer-events', 'none');
}

Now the functions actually abstract away something into a self-documenting name. Would that be worth the effort? I sure wouldn’t do it, but it wouldn’t bother me if I read it. Arguably, the only right way to do this would be to create a simple jQuery plugin so that you not only get the desired abstraction, but you stay in the jQuery paradigm and allow chainable function calls:

$('#some-element').disablePointerEvents().attr('disabled', true).setPointerEventsToAuto().attr('disabled', false)

I’m sure your friend is a great web developer, but I would take their advice with a grain of salt. Many developers that I’ve met, especially the young ones, like to give nit-picky advice just because it makes them sound smart.

1 Like

Thank you for the information again. I was fortunate enough to spend a couple of hours last night on a phone call / shared Codepen with my friend. Between these responses and that, I got a lot cleared up.

We refactored my Tic Tac Toe game to the point where multiple copies could be run on a page at once.