In this lesson, we're going to look at refactoring our code and documenting it. And there is good news here. If we're to this point, it might mean we're close to the end of what we have to do for code, or at least that iteration through what we have to do for code. So some of these things are probably going to sound like common sense, but in my consulting and coding career I found that sometimes common sense isn't all that common. So if you already know this stuff, then good for you. First of all, we want to look at ways to attach event handlers and we all get into coding habits, right? The problem here with these two event handlers is we want to do two different things when somebody clicks a particular button. The problem with the way we've done it is one of these is gonna overwrite the other because of the way we did the event assignment, so we really want to avoid that and hopefully it doesn't come to the refactoring stage before we find that out. But if it does, then let's just change this to something different. For example, if you have jQuery, you can use on. If you're using regular JavaScript you can do add event listener. This assures that any additional handlers don't overwrite the previous handlers like we had there. So far so good. Again, maybe common sensey kind of a knowledge. The next thing is, and I get into this same habit sometimes, I get into a method and I'm not really sure what things about a particular object in a method I'm going to need. So notice I kind of got names all scattered around there in a few different configurations and I feel like as I refactor what I really want to do is go back and make that code more succinct, or at the very least less susceptible to my typing errors 'cause I'm a big one in jQuery of just doing that and forgetting the pound sign and then my code doesn't work. So if I was to change this around, I'm going to just create variables. So this is that dropdown box so I can just do selected index or I can tack on a jQuery find and get the selected option and then do the pre-pend when I'm ready to put something in there. So just a couple of quick tips there on just saving yourself from yourself. How about that? The next thing again might seem elementary, but what we don't want to do is end up with some sort of separate script file where we just dump a bunch of functions in there. Typically you'll see it called our utils file, right, 'cause we don't know what else to call it. Here's a tip. If you don't have a real clear name what your file is, then you've probably got too much stuff dumped into one file. So there's just a few in here, but I've got an add and subtract and a multiply, and then here's the problem too, that's just sitting out there in the global namespace 'cause I've got another add in this customer's file and if I'm using those both in the same page, now I've got a conflict. So as far as this one goes, one of the things we can do is to just put that in a module. And we might also explore just putting it into a class as well. But with JavaScript modules, this gives you the option of only exporting certain functions and you're not putting things out there in the global namespace or at least it's an easier construct to make sure that you don't. So I had all these here for example, add, subtract, and multiply. And one other thing I'm looking at when I see these is, you know, they all have the same parameter set. If you find yourself having that situation, what you might want to look at is turning this into an object instead because we want our parameter list to be as concise as possible, especially those of you that come from the functional world, that's certainly a concern. So maybe if we have all these and they're stuck in a utils class with a bunch of other code that maybe shouldn't be there, let's just go ahead and put this somewhere else. So I created a class called math ops, and again, these are no groundbreaking mathematical-type operations, they're very simple, but I'm trying to demonstrate more of a point about how we can create our functionality without having to have it out there in the global namespace. Now I have this class called math ops that does take a constructor, but notice that each of the add and the subtract and the multiply methods now take one single parameter called triple, and what I've created to support that is just another class called triples and it validates that these things are numbers in order to create it and just goes ahead and gives those their values so I can pass those in there. Now I also wanted to talk a little bit about documentation. Now you might notice I have some extra comments there with some extra tokens and what this is is a way to document your code and it's a package called JS doc. You can get it in a variety of places. The place I got it from is NPM here, so if you don't have it yet, it's a simple matter of going to the command line and doing an NPM install of JS doc. Once you've got that package, now you can start to create these comments. And as a matter of fact, if you want to, you don't even have to type all this out. I can try this one here for example. If I just do that, there we go, the forward slash and two asterisks, it will actually read the signature of the function for me and kind of build the beginning of that documentation. Now, what I've done with these is I've specified the data type of the parameter and also the data type of what comes back. The rest of this is just a description. And what we're gonna do is build a page for documentation and this is gonna show up here. So we can just put arbitrary text right after anything here and this will build the HTML pages when we go back to the command line and create this. And as far as the basics, param is just, you can put the names there, and again, any description you want. Don't know if I need that or not, but you know, that's how it is with comments. As we're reading it, we think, well, we know exactly what it is, but as we go back some time later or as someone else uses our code, probably a good idea to put this in there. So I've designated this as a constructor. There's information about all the parameters. This will show up as a description and anything that returns a value we mark as returns with the type. Now, if you're gonna create documentation for different files, you can also use this to create a link on the HTML pages that you create so that people can browse from one to the other. Now these classes are fairly tightly coupled at this point and so on this page, I wanna give a link to the documentation for triples and on triples I give a link back to math ops. So you can do however much of this you want to. And if you come back to your command line, we're gonna do JS doc and then I need to tell it where to go in order to get files to build, and optionally I can also tell it where to put the files when it builds them. So for this project, I'm just gonna let it do what it wants to do as far as where it's gonna put those files. But I wanted to go grab the documentation from everything that's over here in scripts. So anything I've got documentation on I'll get a page for, otherwise it's just gonna plain ignore it. And the best outcome here, there we go, is that I do this and I just get the command prompt back. So I should have a out folder. There it is. That's the default that it creates in my application and I can get to all of this through index dot HTML. So there's the classes it's documenting. I didn't do any description on the basic page, but there's math ops. There's my constructor. There's each of the methods. It tells me where it is in the code and I can use that link to browse to the other class and you can see I didn't do descriptions for everything, but when I do it shows up right there. So a nice handy way to be able to do documentation. It's just a matter of putting in a few comments and we all know from doing this, it's easier if you do it at the time that you're creating it, not doing it later. Thank you for watching. In our next lesson, we'll talk about bundling and minifying as we get ready to ship our product.
