The full video and many others like it are all available as part of our Frontend Masters subscription.

Kyle Simpson

Kyle Simpson is an Open Web Evangelist from Austin, TX, who's passionate about all things JavaScript. He's an author, workshop trainer, tech speaker, and OSS contributor/leader.

Kyle Simpson

You Don't Know JS

For this exercise, you will be using the files in the day1/ex3 folder. Look at the README.md file for exercise instructions.

Get Unlimited Access Now

Kyle Simpson: This next exercise again probably shouldn't take the ten minutes, but what you're going to do is essentially you're going to take the fixed version of what you finished in exercise two. You can either take my fixed JS, or you can take yours if you like your code, either way.

But that's going to be the starting point for ex3.js. So when you open ex3.js, you'll see that it's empty. And it says copy in the fixed code as your starting point. So I will do that, I will take the fixed version from ex2. Copy that in as my starting point.

Now, what does this readme tell us to do? We are going to revisit the work from exercise 2, but we are going to take what we just learned about the prototype and we are going to do away with the module pattern. And, instead, we're going to implement this as a class with prototypes.

So, I'm going to get you started, and then I'm going to give you a couple of minutes so that you get some practice with it. So, the first thing is that we no longer have a module factory. What we're instead going to have is a constructor, which we'll call notes manager, for convenience sake.

Consistency. We'll come back to his contents here in just a moment, but now these things that were private functions inside of our module are now going to be public methods on our API. The way do that is notesmanager.prototype.addNote = function that takes a note parameter. And then we unindent one level, add a semicolon.

Now in all places inside of these functions that they reference things that were private variables, they need to now reference properties under this object. So I need to say this.$notes .preprend. I'll do one more for you. NotesManager.prototype.addCurrentNote = function
Kyle Simpson: Add my semicolon. That new note, that needs to have a this reference in front of it, this guy needs a this reference, this guy needs a this reference, and this guy needs a this reference.

So your exercise is to continue that conversion, convert from the module format to the prototype format, and insert your this references. Pay particular attention to your event bindings, make sure you're using binding where you need to. And I'll give you five or eight minutes for you to play around with typing all that out and we'll regroup.

Ready to take your code to the next level?

Intense courses with world-class teachers and unlimited access to our growing library of videos for the great price of $39 per month.

Get Unlimited Access Now