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.
but this was more for an exercise of forcing myself to learn MVC and understanding implementing it.