This is good info thanks. Im probably over-thinking it you are right (but I guess thatâs expected if you are not used to OO programming). Iâve tried to use singletons as much as I can in this so far. (Caution: Wall of Text incoming)
Couple of questions about what you wrote (Which mostly makes sense):
- On your
init()
functionâŚyou would probably be passing maybe a param and use that param to set this.player
(and the computers Icon. But you would need to grab that param from SOMETHING (an event handler)
- Why wouldnât I want to set my players in the constructor? I feel like thats an initial private variable that needs to get passed around to different functions? or are you saying make the
this.player
declaration in my constructor but actually assign it in a different function?
- Do people in OO Classes ever assign
this.prop/value
anywhere else besides the constructor? IE in a method make a this.whatever = something
declaration? Does that even work? (as in does it actually set the propery for the new object when you make a new instance of the class via: let obj = new class()
So this leads to probably my biggest question: Say we have a class which represents a DOM element(s) (in this case itâs the boardâŚwhich is basically the entire game for this project, so it makes sense for me to just have one class). I need event handlers (obviously) to call different functions in the class, and set initial things.
Where on earth do I attach event handlers in classes/objects? Since they are absolutely required for most javascript projects (if you want to do any interaction at all). I mean they would have to be set up in the constructor right? otherwise they wonât be set correct?
I was looking at some work code that someone had written, and this person made basically an events
object which make click handlers. (In their class prototype). and then when a new instance of the class was made he did a try/catch block like so:
$.each(this.events, (key, value) => {
try {
this.events[key]();
} catch (error) {
//Fail stuff here
return false;
}
});
So this sorta makes sense, he is going through each âfunctionâ in the events object (Which are basically just click handlers) and calling them.
I guess thatâs like basically just setting up a click event handler for that instance of that classâŚbut how is that any different than just setting them up in the constructor I guess is what im curious about? Thatâs my biggest block right now is where I should be putting them.
Just to make sure im right, from the loop above lets pretend (rewrote the code, but this is basically how itâs setup_:
this.events[key] = makeRed: function makeButtonRed() {
$('button[something-or-other]')
.off('click')
.on('click', function clickEventHandler(event) {
const id = $(this).data('the-id'); //Grab data-the-id data value
const thing = `div[data-thing="${id}"]`; //set a thing variable
const color = $(this).data('color'); //Get state (active or inactive)
methods.setColor(thing, color); //Call a method
event.preventDefault(); // <----Not sure what this does
});
}
So in his case, from reading code it seems like he has events
(Which grab data from this dom element and store them into variables) that call methods
object (Which are usually doing any logic that needs to be done (Like in my caseâŚsetting the color and maybe making some selectors or something internall) and THEN calling a view
object (Which has itâs own methods) that actually do the updating of the DOM.
I like what heâs doing and it does make sense, but thatâs a huge projectâŚand probably outside of the scope of this tic-tac-toe, but I guess im trying to insert a âtasteâ of that type of programming into this. And most of it makes sense. However it looks like his event handlers are really not handled anywhere and he just calls that $.each
âInitâ function which sets themâŚis that normal? Where would people normally put them.