Cat Clicker Premium Solution – JavaScript Design Patterns

Now, I do want to be clear. There is no single one right answer,
as long as you’re separating concerns. So rather then compare my code to yours, instead look at how my code is organized
and draw inspiration from that. Now to show out,
I’ll show you my index.html file. This is very simple. I have a ul called cat list and
a div with an id of cat. It has a cat-name, cat-count and
cat-image inside of it. These things are things that
the view is going to hook on to and update whenever it’s told to render. Let’s dive into the JavaScript now. First, we’ll take a look at the model. Now, in this case,
the model is simply and object literal with currentCat set to null and cats
being this very large array of objects. Each one of these objects represents
a cat and inside of each of these cats, I’ve got clickCount, name,
image source and image attribution. Now let’s scroll down and
look at our octopus. In our octopus, I have the init method,
which starts off the entire application. I also have a getCurrentCat and
getCat function. The view calls both of those in order to
get the current cat or all of the cats, so that way you can render properly. We also have a setCurrentCat function. You passed it in object and it sets the CurrentCat equal to
the object that you pass in. And lastly, we have incrementCounter. What that does is it takes our current
cat and it increments it’s ClickCount. Now whenever that happens,
it tells the catView to render. Let’s take a quick look at our
view before we see the flow of the application. First, we have the catView. The catView is object with an init
function and a render function. I’ve separated these out, so that I
can render it whenever I want to, but init only gets called once. For example, I don’t want to grab all of
these DOM elements from the DOM every single time we render. I may as well just do it once and
store them here on the catView. Similarly, I only want to add the click
listener for the catView once. Now the reason is because as I click
between cats over here in index.html, it just changes this information here. It does not replace the entire div. This div is always here and
this image element is always here. So, I can add the event
listener one time. And then no matter cat I change to,
these elements will always be the same, they’ll just have differing content and
a source attribute. And lastly in our catView init method,
we call this.render, which will update the view. What does render do? All it does is it gets our
current cat from the octopus, which of course, gets it from the model. And then we set the count element and
the name and the image to the clickCount and the name
and the image source of our CurrentCat. Remember that these on the left
hand are the DOM elements, so that’s our catListView. Render gets called over and
over and over again, but init only gets called once. We’ll see where that gets
called in just a moment. Let’s take a look at our catListView. Our catListView is
actually a bit simpler. Here we have our init method,
which only gets called once. We grab the catListElement from the DOM
and put it in this variable here and then we say, render ourselves. Let’s see what render does. We first get the cats from the octopus,
which of course originally would get it from the model, then we empty our ul,
which lists all the cats. And then we go over all of the cat
objects and we create an li and we do all of the necessary stuff. That being setting the text content
equal to the name of the cat and adding EventListener. Now here’s my little closure trick
that I had to do in order to make this EventListener inside the for loop work and you’ll find that this is
a common thing that you’ll have to do. If you’re adding EventListeners
inside of a for loop, you actually need to create a larger
function, pass in your cat and then return the function, which does
the stuff that you want with that cat. So ultimately, all of this code says,
when you click on the element, tell the octopus to set the CurrentCat
and then render the catView, because it’s changed. And lastly, add all of our lis
inside of this for loop that we’ve created to our CatListElement,
the unordered list of cats. Now, let’s run through this really fast. Octopus.init, this makes
everything happen. When this gets called,
the following things happen. We say, hey, model, set your CurrentCat
property equal to model.Cats 0. In other words,
the first cat in the list. And then we say,
catListView.init and catView.init. We tell our views to
initialize themselves. And then the views handle all
the stuff they need to do without the octopus needing to get involved. Now if you liked to go over this code, you can find a link to it
in the Instructor Notes. I would definitely suggest you dive in
and see if you can figure out exactly how every part of this works,
then compare it to your code. If you want to go back to your code and
make any changes, go ahead and do that now, but don’t copy my code. Remember, this is not my project,
this is your project. So, only use my code as
organizational inspiration. Once you’re satisfied with your version
of Cat Clicker Premium, go ahead and click to continue on.

Bernard Jenkins


  1. Not a word about that calling .appendChild() in a loop is terribly inefficient in real project, because it causes reflow each time.

Leave a Reply

Your email address will not be published. Required fields are marked *