The Module Design Pattern
One of the biggest issues with our design using the Constructor Design pattern was that in current versions of javascript there is no way to create private members of an object. The Module Design Pattern enables us to have a separation between our private and public API %u2013 protecting the code from external resources.
Video Transcript
00:00In the last lecture successfully,
00:02we solved the problem of the global scope.
00:06Now, the next step for us is also to solve
00:08the problem of privacy,
00:10where most variables in JavaScript are just not private.
00:12And for that, we're gonna use the module design pattern
00:15to enable us to create a real privacy control,
00:18having private and public members,
00:21literally having a public API,
00:23or creating a true encapsulation,
00:25which is something that is very hard
00:27to create in JavaScript.
00:28But with the module design pattern,
00:30it is actually really easy.
00:32So let's jump right into it and see it in action.
00:35In this lesson, we're not gonna solve one of our problems,
00:37which is that our namespace is very long.
00:40We're gonna ignore that for now.
00:42Our main focus for this lecture is gonna be,
00:44how do we protect our variables
00:46from being accessed by anyone that's not us,
00:50or really anyone that's not within our scope
00:52of this pseudo chat in our case?
00:55To showcase this example, I'm gonna go ahead here,
00:57and I'm gonna just create here a new variable
01:01and we're gonna use a module.
01:02And I'm just gonna call this chat module.
01:07And literally, instead of assigning a variable inside of here
01:10or an object, the way we defined it
01:12when we're working with basic namespaces,
01:15and by the way, this concept of namespaces, it still applies.
01:18So we definitely don't wanna create a global scope variable
01:21because someone might override it.
01:22But I'm gonna ignore that for now
01:24because we're gonna show a solution to that
01:26later on in this chapter.
01:29All right, so I'm gonna go ahead and create here a function.
01:32And again, I'm ignoring this whole construct.
01:35It's really important for me to note this
01:37because this is important if we still wanna protect
01:39what we're creating from being overly accessed
01:42by the global scope.
01:43Now, when I'm creating this function,
01:45I really don't wanna assign this function
01:47to this chat module, but what I really wanna do
01:50is I wanna basically assign to it the value
01:53that is returned from this function.
01:55To do that, I'm gonna wrap the function
01:57with an open and closing round bracket
01:59just to make sure that there won't be any errors,
02:02and I'm gonna go ahead and assign it.
02:04Now, technically, there wouldn't be an error
02:06if we wouldn't do it this way,
02:07but later on, we're gonna talk about
02:08why this is important to add the round bracket
02:11because in some situations,
02:13you would have an error in your application,
02:14wouldn't work.
02:15All right, so what we've done here
02:16is we're basically executing this function,
02:19and really, the goal is to return something.
02:22And what we're gonna return,
02:23and I'm gonna go ahead here and return it,
02:26return, and we're gonna return an object.
02:29And this object is gonna be an object literal
02:31where we're gonna list out those functions
02:33that we've created because we don't mind giving access
02:36to the users to those functions.
02:38So literally, I'm just gonna go ahead here
02:40and just grab all of these public functions
02:43because these public functions
02:44we want the user to have access to.
02:46So I'm gonna go right in here,
02:48and we're gonna literally just return all those functions.
02:51So we have here the talk function,
02:52reply yes, no, and say sassy stuff.
02:57This is replay.
02:59Well, let's leave it as replay.
03:01So replay, yes, no, fine.
03:02Reply, replay, nevermind.
03:05Let's continue on
03:06because we don't wanna change things around too much.
03:08All right, now it's time for us to move our function
03:11that we've just created here into this private scope
03:15that is above the return.
03:17Now, the idea here is anything that's inside of here
03:20lives within the function.
03:22And because it lives within the function,
03:24only things that live inside of the scope of this function,
03:27which is literally everything here,
03:28including this return, would have access to it.
03:32So in this case, if I'm gonna just go ahead here
03:34and just add these variables,
03:36what I would do is it's really important also
03:38that I'm gonna go ahead and define a var
03:40because that is making sure that this variable's scope
03:43is gonna be within this function
03:45and would not bleed out into the global scope.
03:48So now that I created that var,
03:50all that's left for me to do is start off
03:51by copying all these variables.
03:54And I'm just gonna go ahead here and copy them.
03:56And I'm just gonna make sure
03:57that I'm gonna set it to be equal
03:58because that's the sign that you would set it
04:00if it was inside of, just as we've done previously.
04:04And I'm just gonna go ahead and make sure
04:05that I'm just updating everything to be an equal
04:09instead of the colon.
04:13And last but not least, our last item.
04:16And we have also one more thing is our function itself.
04:18So we could go ahead here
04:19and just define another function right inside of here.
04:23And I could define it as a variable if I want
04:25or I could define it directly as a function.
04:27The most important part here is that I'll go ahead here
04:30and also not put it in the global scope.
04:33So if I decide to put it as a variable,
04:35make sure that it's part of the var.
04:37And if it's not inside there,
04:39then just make sure that you're defining it
04:41not as a variable, but defining it as a named function
04:45and it will be called echo.
04:47Now, before we even test this out,
04:48I'm just gonna go ahead here
04:49and just comment out everything that's below here
04:52because we don't need it anymore.
04:54And it's also time for us to update our references
04:57because now it's not this anymore,
04:58but it's just directly the A said.
05:01And I'm just gonna go ahead here
05:02and literally just slash out
05:04and remove any place that says this
05:07unless it's the method itself of echo.
05:10Because echo itself, well, not no,
05:13echo doesn't need this either
05:14because unless I'm referencing
05:16to one of the global area methods, I would use this.
05:20But in this case, we're not referencing any of them.
05:23Those are just, they are just using different variables
05:27that exist inside of the scope.
05:28So all I really need to do
05:30is just remove all those this references
05:32because they're just not needed anymore
05:34and they're not correct anymore.
05:36So this is all the steps that we had to do
05:38and we're definitely gonna test this out
05:40to see that everything is working still.
05:43But the logic here is very, very cool
05:45and it's called the module.
05:46And this module, we create a function,
05:48we execute it making sure
05:50that it's gonna send back something.
05:51What does it send back?
05:53Whatever the return value we set.
05:55So in this case, we're sending back the functions
05:57that are the public functions.
05:59But before we do that,
06:00we define the private variables which we're going to use.
06:04Now, these variables are not accessible
06:06by anyone besides our internal mechanism.
06:11So in this case, if I try to access,
06:13if I'm gonna do our console.log
06:15and I try to access, for example, the echo function,
06:18if I try to access it
06:20and I'm gonna go into my chat module
06:22and I'm gonna go to the chat module
06:24and I'm gonna ask for the echo,
06:26I'm not gonna get anything.
06:27And let me just prove also in the fact
06:29that if I type your echo as a global scope variable,
06:33then I shouldn't be getting anything there as well.
06:35So let me go ahead and click here on refresh
06:37and let's look at our file.
06:38So we could see we have a reference error
06:40because echo is not defined.
06:41Perfect, because we don't want it to be defined.
06:43So we could go ahead and delete that.
06:46All right, so now that we know
06:47that our private methods and properties are secure
06:52and only what we send out, only what's public is working,
06:55let's go ahead and actually see it in action.
06:56So because I'm working with jQuery
06:58and I need to wait for my document to complete loading,
07:01let me just go ahead there and set a document ready.
07:06And I'm just gonna create here that callback
07:07so we could then refer to our chat module functions
07:12which are gonna use jQuery
07:13to echo out that echo function.
07:16So I'm gonna use that chat module
07:17and I'm gonna call, well, we don't need to call echo anymore
07:20but I'm gonna go ahead and talk.
07:22Thing, this is great.
07:27And let's do the replay, yes, no.
07:31And let's do one last one, the, where was it?
07:34Chat module and it was say sassy stuff.
07:37And if I go ahead here and just save this
07:39and click on refresh, we should, oh, I forgot a dot.
07:42There we go, that would do it.
07:44And let's click on refresh.
07:46And here we go, our chat functionality is now working
07:49and now we're working with a module,
07:51making sure that we're protecting our private variables
07:54and we have only one access point to the global scope
07:57and that is that variable, that initial variable
08:00that we've created.
08:02In this lesson, we met the module design pattern
08:05and saw the advantages of it specifically
08:08then the capability of having private members.
08:11But there are limitations to it
08:13and we're gonna talk about those limitations
08:15as we cross over into the module reveal pattern
08:18which is an upgraded version of the module pattern
08:21and we're gonna talk about why do we wanna move there
08:23in the next lecture.