This course contains good reference material, but does not reflect our current quality standards.
Transcript from the "Task #3 - Carousel & Details Modules" Lesson
>> Kyle Simpson: Armed with that as our header.js, I want you to do the exact same thing for the carousel file and for the details file. Same mindset, same process, same syntax. But it gives you some practice doing a real world module.
>> Kyle Simpson: If you have been feeling like, wow this is bending my brain a little bit or I'm not quite.
[00:00:36] This is the most important of any of the exercises that I've given you today is to try your hand on it. Try your hand at doing what I just did on header.js, try doing that on the details js or the carousel js, because as I said earlier there is value in the confusion.
[00:00:53] Because when you work through the confusion and you have the lightbulb moment and it works, that solidifies it way more than anything that I could give you as a lecture.
>> Kyle Simpson: So, I will give you about eight, nine minutes or so, we'll come back and I will talk you through how I do the conversion for carousel and JS but try your hand at converting both of those to modules.
[00:01:19] So I have zoomed way out, so you could see it all at once but, the major patterns to be looking for if I can use.
>> Kyle Simpson: Folding magic here to kinda keep the unnecessary details away from us. The major details to look for are an outer function which needs to run at least once.
[00:01:49] Here we only needed it to run once cuz we only need one header instance if we made it a regular function we could call it multiple times and get multiple hit modules. But we need it to run at least once, and we need to have some private stuff so we've got some private variables and private functions in here.
[00:02:06] And then we need to have a public API that gets returned back, and that's what gets assigned to our instance variable.
>> Kyle Simpson: That pattern of doing modularization is essentially identical to every module I've ever written. Like there's little tweaks and bits and pieces of things that we do sometimes differently but the basic concept there is an outer function within our private functions and variables.
[00:02:38] Return an object that's a public API. And that's really it. So while we can get overwhelmed a little bit sometimes in the weeds with J Query, syntax and stuff, don't miss the bigger picture here, which is that this pattern is about code organization. If I gave you just a bunch of simple foo bar examples, you don't really pick up on why this module pattern is so useful.
[00:03:00] So, I have to give you a somewhat more complex app. That's got some of this other moving parts in it for you to really pick up on why that is an improvement over what we had before.
>> Kyle Simpson: Okay, so let's quickly try our hand at it, I'll start with the details one.
[00:03:22] Let's quickly try our hand at, we need a var details. We'll use another iffy because we only need one of them. I'll take the ready thing out for right now. We'll put that at the bottom.
>> Kyle Simpson: Here's my iffy closed. Here's my internal private module function called load person.
[00:03:49] Here is my init code essentially, this stuff is what I'd wrap in an init function.
>> Kyle Simpson: And then I'd notice right away that I'm gonna need those variables across multiple functions. So I wanna take those vars out, basically and put them at the module level so I need var items and var content.
[00:04:24] And then what's the next missing piece?
>> Kyle Simpson: I need a public API, right? So what's my public API? Init init. And now on the outside we have details.init.
>> Kyle Simpson: Do you see how that was the exact same pattern as what I did in the previous file? This is one of the most useful hammers that you can have in your toolbox, you're gonna pull it out all the time.
[00:05:10] Bam bam just hammer the nail everywhere that you see some code organization, module is probably gonna be your first, should be your first instinct, I should use a module to organize that code.
>> Kyle Simpson: Okay, so with that out of the way let's try the last one, the carousel.
[00:05:31] There's a question.
>> Kyle Simpson: We moved the var declarations out but the question is why are these in there. We can't run this code until we're sure that the dom is ready. So we leave the initialization of those variables in the init, but outside of init we have the declaration so that we can share those variables across all of our internal functions.
>> Kyle Simpson: Sorry init is shorthand for initialize. It's just the common name that people refer to, the kind of first Initialization step of any entity. Okay.
>> Kyle Simpson: I had renamed person clicked back to load person. So it's still there, it's still inside of our module. Question was what happened to person clicked?
[00:06:35] I had removed person, I had renamed person clicked to load person in an earlier session. Okay, so let's switch to carousel. Same basic principle var carousel. Put in an iffy.
>> Kyle Simpson: Take the, I didn't even have a doc, there it is. I was like, where's my document ready.
[00:07:05] Take the document ready out, move it outside. These are all fine as private internal functions, that's good. These are all things that are gonna need to be inside of an init function.
>> Kyle Simpson: But those declarations need to come out. So I'm gonna take all those vars out. Those need to be at the module level, so that they can be shared with the other functions in the module.
[00:07:46] So I'm just gonna have one big var list of those.
>> Kyle Simpson: What do I need next?
>> Speaker 2: In turn, the API.
>> Kyle Simpson: I need an API, right? Public API.
>> Speaker 2: Yes.
>> Kyle Simpson: Either I've completely lost you or we've run out of coffee, or both. [LAUGH] Are people following along?
>> Speaker 2: Yes.
>> Kyle Simpson: Yell at me if I'm going too quick. Are we following it? Okay, so init init, now what do we put down here inside of the document ready call?
>> Speaker 2: For the name of the function, I had.
>> Speaker 3: The module's carousel right?
>> Kyle Simpson: Module carousel dot init.