Structuring JavaScript Code

This course walks through several key patterns that can be used to encapsulate and modularize JavaScript code. Throughout the course you’ll learn how closures and other techniques can be used to better organize your JavaScript code and make it easier to re-use and maintain in HTML5 applications.

Course info

Rating

(1679)

Level

Intermediate

Updated

Dec 12, 2011

Duration

2h 10m

Description

With the rise of HTML5 more and more JavaScript code is being included in applications to leverage canvas, geolocation, local storage, and other key APIs. This course walks through several patterns that can be used to structure code in a way that’s more re-useable, more maintainable, and less susceptible to naming collisions. Learn about patterns such as the Revealing Module and Revealing Prototype patterns and see how they can be used to convert function spaghetti code into structured code that encapsulates variables and functions.

About the author

Dan Wahlin founded Wahlin Consulting, which provides consulting and training services on JavaScript, Angular, Node.js, C#, ASP.NET MVC, Web API, and Docker. He is a Google GDE, Microsoft MVP and Regional Director, and speaks at conferences and user groups around the
world.

Section Introduction Transcripts

Prototype PatternSeveral different patterns exist for structuring JavaScript code to make it reusable, maintainable, and help it avoid naming conflicts. The first one we're going to talk about here is the prototype pattern. Now prototyping is a feature in the JavaScript language, and this particular pattern is going to leverage prototyping functionality. So the agenda is as follows. We're going to start off by talking about what is the prototype pattern as far as pros and cons and why you might want to consider it in some situations and not in others. From there, we'll take a look at how to structure your JavaScript code and actually use this pattern and apply it. And you'll see there're two parts to this--a constructor and a prototype section. And then, finally, I'll walk through a demonstration of a couple of ways you can use the prototype pattern to structure JavaScript code. So let's jump right in to the pros and cons.

Module PatternAnother pattern you can use to structure your JavaScript code is called the module pattern. This is a pattern that Douglas Crockford came up with initially, and it's been very popular. It provides some very distinct differences between other patterns, such as the prototype pattern that was covered earlier in this course. So what I'll do is walk you through what is the module pattern and what are some of the pros and cons it has, and I'll specifically compare it to the prototype pattern, because there are some very distinct differences between those two. We'll talk about the module pattern structure, what's the basic code you need to have to get started, and then how do you fill in the blanks from there. And then I'll walk you through a few demonstrations of using the module pattern and explain how it works. So let's go ahead and get started by taking a closer look at what the module pattern offers.

Revealing Module PatternIn this module, we're going to take a look at the revealing module pattern, one of my personal favorites, and one I've used a lot in different web applications out there. So to start off, we're going to jump into what is this pattern, how does it differ from the module pattern, and what are some of the pros and cons? And you'll find that it's actually very similar to the module pattern. In fact, it has all kind of the same pros and cons associated with it. We'll then go into the overall structure of this pattern. And then from there, I'll show you several demos again of how we can use this pattern, and I'll show you a couple of ways you can use this pattern. So, let's go ahead and get started with what the pattern is and some of the pros and cons that it offers us.

Revealing Prototype PatternIn this module, we're going to talk about the revealing prototype pattern, another one of my favorites because it combines two of the other patterns we've already talked about in this course and merges together the best parts, so you get a lot of extensibility features and some other benefits that we'll talk about. So, in this module, we're going to start off, as we have in the others, talking about what is the pattern, why would I want to use it, and what are the pros and cons of this pattern? From there, we'll go into what's the structure of the pattern look like, and I'll show you a simple example of getting started writing JavaScript code that uses this pattern. And then from there, we'll jump into some demos of showing the pattern in use. And I'll show a couple of different ways that can be used and even how it can be extended. So, let's get started by talking about some of the different pros and cons and what this particular pattern offers us as JavaScript developers. The revealing prototype pattern really