Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Js design 1
  • Overview
  • Transcript

2.1 The Factory Pattern

The Factory pattern, also known as the Builder pattern, allows us to wrap object creation code in a simple function so that we don't need to manually instantiate new objects. Let's get started with a quick look at this simple and commonly used pattern.

2.1 The Factory Pattern

Hi, folks. In this lesson we're going to look at our first pattern, which is the factory pattern. This is an object creational pattern that can wrap a constructor for different types of objects, and return instances if these objects fire a simple API. The factory pattern is very commonly seen in JavaScript, and is often used to simplify the creation of complex objects, or to create large numbers of similar objects. So let's say that we want to create one of the few different types of media item, like a video or an image. We can add a factory that will return an instance of one of these types of objects for us. So let's start by adding a new directory called factory to our JS directory. And then inside this directory, we can add a new module called video.js. RequireJS makes a define method available globally, and we can use this as a wrapper for all of our modules. Inside this, we can add our simple video constructor. And at the end of the module, let's just return the constructor. So now let's add a couple of properties to our video object. So we can set a length property, and that will either be the length parsed in with the attributes, or, if that doesn't exist, we can initialize it with zero. And let's also add a name. And again, if the name property is not parsed in with the attributes, then we can just set the name to an empty string. So this is our simple video constructor, so now let's add an image module, which is very similar to the video one except that it's a constructor for images instead of videos. So it's very similar in that it's a constructor that will produce instances of objects. The only difference is that the objects that get produced with this constructor have different properties than the objects that get created with the video constructor. So this time an image has a width and a height and a name. And again, if the corresponding attributes aren't parsed in we can just have sensible defaults of zero and zero for the width and height and an empty string for the name. Great. So now let's have the factory that creates instances of these media items for us. Let's add a new script to the factory folder, and we can call this one media factory. First of all, we want to load our media constructors as dependencies. In order to do that, we'll need the require function that is automatically parsed to any module that is created using the defined global method. So the require function is invoked, and it has parsed a string that tells the function where the module that we want to load is. So factory/video is a path to the video.js file inside the factory folder. And we don't need to specify the .js extension because RequireJS will just assume that we're working with JavaScript files and it will add that on for us. We are storing both of our constructors inside an object called media. And because they are constructors, we've capitalized the property names that hold the constructors' video and image. So now our factory just needs to return a method that other modules can use to create new media items without having to invoke the constructors themselves. So we're going to return an object that has a create media method. That method will accept the type of media item that we want to create. And it will accept any attributes as the second arguments. So, inside the create media method, we first want to create the new media type. So what this will do is just store the constructor for the type of media item that we want to create in a variable good media type. We don't strictly need to do this, but I find it's more readable. And once we have the constructor that we want to use, we can just return a new instance of the objects created by the constructor. And in this case we just pass thru any attributes that were passed to the create media method. Great, so let's wire things up now. And the init.js module that I mentioned in the last lesson is going to be the file that bootstraps each example, and I've placed a copy of this file into the root of the project. So I'm just gonna copy this now into the factory folder So first of all let's create some variables. So, even though we're going to be creating new instances of video and image objects, we don't need to actually depend on the modules that contain these constructors. All we do is depend on the media factory, and that handles the creation of these objects for us. So, now let's create some media objects. And let's just log out these objects to the console. So now we just need to update our main js file so that we can load the init file for the factory example. So now let's run the index.html page in a browser. And if we open up the console, we should be able to use the run example method to run the example code for the factory example. And as you can see, we have our two objects which we locked to the console. We have a video and an image. They're both completely different types of media objects and they have different properties, but they're created in exactly the same way using the method exposed by our media factory. So in this lesson we looked at a basic implementation of the factory pattern. We saw that it is composed of the individual objects that need to be created, a factory that creates instances of these objects and a client. The client using the factory has full control over which objects get created and the attributes they have but it isn't involved in the actual creation of the individual objects. It's decoupled from the constructors. This makes it very easy to add new types of objects in the future. Even though we only have two meteor items in this example, the benefits of the pattern would become clearer as we add in more and more different types of media objects. Thanks for watching!

Back to the top
Continue watching with Elements