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

4.2 The Decorator Pattern

The Decorator pattern is used to extend an object with different behaviours, with the ability to build up the functionality of an object with multiple decorators. In this lesson, let's see how Decorator can be put to use in JavaScript.

4.2 The Decorator Pattern

Hi Folks. In this lesson, we're going to look at the decorator pattern. This is a structural pattern that is used to add new functionality to existing objects. In JavaScript, we can add properties or methods to objects whenever we want. But the decorator pattern still has its uses in minimizing the number of subclasses we might need to use for our application. We might have a simple base class that we need to derive lots of smaller objects from. Some might need some behaviors, and others might need different behaviors. And maybe a few might not need any extra behaviors at all. We could create a different subclass for every possible combination of behaviors. But when we start to get a lot of variation, the number of different subclasses to maintain, can grow exponentially. In this situation it might be easier to create decorators for each variation and then apply these to our objects as required. So let's say we have a basic user class which represents a member of staff at an organization. All users have read access to public material, but only executive users have access to confidential material. Admins also need right access to the material. Even with just these few requirements, if we go down the subclassing roots, we'll need quite a few different subclasses. And each time a new requirement is added, we'll need to add more. So let's use decorators instead. We can start out by creating a new folder called decorator. And inside this, let's add a new file called user.js. Let's keep the constructor pretty simple. User objects have a method called getPermissions, which is used to return a simple string that details their level of access. We can also add a method to the user's prototype, so that all user objects inherit it. We use this method to add new decorations. This method has passed the new decorator and simply overwrites the objects getPermissions method with its own copy of the method. Lastly we can return the constructor. So now let's add a new directory in the decorator directory. We can call this one decorators. And let's just add a couple of decorators, starting with an exec decorator. This module just returns an object that has its own implementation of the getPermissions method, ready to be copied to the object being decorated. Let's add another one quickly, this time an admin decorator. Again very simple. All that differs is the implementation of the getPermissions method. So let's update our main file first of all with the init module for this example. And lastly let's wire things up in the, init module for this example. So we require in the user constructor and our two decorators. Now we can create a basic user. So if we log the user's permission to the console now, we should see that it has only public read permissions. But now, let's make this user an executive by decorating it with the executive decorator. And let's go back to the browser now. And this time, we find that it now has access to read the confidential items. So let's create another user now. And let's just update our log slightly. And we now find that user two is an admin, and has right access to both public and confidential items. So in this lesson we looked at a very simple version of the decorator pattern. We saw that the decorator pattern is used to add new behavior or functionality to an object dynamically. In JavaScript this is extremely simple, as we've seen in this lesson. This pattern is often used to avoid situations where we have a lot of subclasses to maintain. Thanks for watching.

Back to the top
Continue watching with Elements