Moving to one object and namespace
n the last lesson we created out first working code segment and discovered we have an issue as we are approaching the global scope to often. With over 11 global scope references we have 11 possibilities to get our code overwritten by other code(or our code over writing other code). In this lesson, we will condense our code into an object and move it into a unique namespace protecting it from mistaken overrides. Within we will meet our first formal design pattern the NameSpace design pattern.
Video Transcript
00:00It's time for us to stop making problems and instead of that start creating solutions
00:05We're gonna move everything that we've created in the last lecture into one object
00:10We're going to condense that code into one large object by that reducing the global scope footprint or literally
00:16What we're doing is we're creating an object literal pattern the most simplistic design pattern out there
00:23The next step after that we're gonna also now that we're only gonna have one object in our scope
00:27We're gonna ask ourselves. How could we protect that object or make sure that we're not overriding other things?
00:33We're gonna use the namespace design pattern to do that
00:36So by the end of this lesson, we're gonna be familiar with two different design patterns very basic ones
00:41So let's jump right into it
00:44As we left off in the last lecture the biggest
00:47Hurdle that we have in our application currently is that there's 11 places where we're directly engaged in the public
00:55Global API, which means there's a high
00:59Possibility and it's plausible that at some point we're gonna create a variable that is so common that someone else is using it
01:05Or we ourselves are using it. So if we're gonna create working directly the global scope, this is a danger
01:10So let's go ahead and fix this danger and the most simplistic way to
01:15Simplest way to do it is using a pattern which is not really quite commonly known as a pattern
01:20It's just like grouping this all all up into an object
01:23It could be an object oriented object or it could be a literal object. So if I just go ahead here
01:28I'm just gonna create a literal object
01:29I'm gonna call it Oh and I'm just literally all I'm gonna do is gonna open and close a bracket
01:34Creating myself an object now what I'm gonna do is I'm gonna literally take all the variables
01:40I'm just gonna cut them out of place
01:43Position them inside of that object and literally just go ahead there and just change the structure a bit because instead of equal
01:50We're gonna put their
01:51Colon and let me just go ahead there
01:54I'm gonna put a colon here and a colon here and a colon here and I just just created now all
02:00The all the variables that I'm using in my application and I'm gonna go ahead and continue using oats of my methods
02:07Literally just going inside and configuring our methods to basically be anonymous functions that belong to a specific variable
02:15so instead of defining them as built in
02:19Regular function the functions
02:21I'm literally just going ahead and changing their construct to be fitting to live inside as a variable of an
02:29Object and I'm just gonna go ahead here and just continue this very quickly once we configure it all this
02:35We're just gonna have to also change a little bit the logic inside of the functions. So they're referring to the right stuff
02:40So let me just go ahead there and just update also the say sassy stuff really quickly and I'm just gonna grab the function
02:47and I'm also gonna
02:50grab the last last function which was our echo function and
02:55let me just go ahead there grab our echo function and
03:01I'm just gonna grab the whole thing there
03:03define here echo and
03:08Let me find all that stuff here push this in get rid of the variable name up here and we've just created
03:15The the the full
03:17Everything is now inside of one spot and I could go ahead here and just get rid of all of that
03:22Because now everything isn't living inside of our variable
03:25Oh now I'm gonna go inside of this variable and just go through each item here making sure that it's referring to the right thing
03:31So now there is no global variable called echo. I'm gonna have to approach this that echo
03:37Alright, so that has to change and also the reference to our variables here would need to reference to the object itself
03:44I went ahead and manually made sure that every item that is part of the variables
03:49Starts with the this so it's gonna refer back to itself to the object itself. We've created
03:55So I'm not gonna walk through you that through this with you
03:58I'm gonna leave this to you to do it yourself or check our source files and just go ahead here and click on refresh and
04:05If I go ahead here and now go ahead and just try to talk for example
04:10We'll see that our talk method will work and if I go ahead here
04:14We'll see that our my NARF calls are working and once we reach six is gonna start deleting an item each time
04:22Leaving only six at a time. Perfect. Now. I just want to talk about one more thing
04:27We just learned about our first design pattern and this design pattern is very simple one that you work with all the time an object literal
04:33Now I want to take it one step further talking about name spaces now
04:38Right now what we did is we got rid of the global scope altogether leaving only one item in our global scope
04:45Unfortunately, this one item this name could be something that are that is needed reserves. Maybe someone's gonna override it
04:50Maybe even we will override it. This name is not a really great name
04:54A much better solution would be if we went ahead and created a really long
04:59Namespace now the idea of a namespace is basically to create a very unique path
05:04That would be so specific to your project that there's no chance. No one else is overriding it
05:10One way to do that is starting off with defining the calm for the for the domain itself and then defining your domain
05:17For example, mine is zero to geek. So I wrote their o2 geek and then I'm reversing it
05:21So it's calm dot o2 geek now. I'm doing this project for packed
05:25So I'm gonna put it inside of the pack folder and in this packed folder. I'm gonna create a
05:30Variable that's going to be the variable of this specific project. I could have went ahead and also created the JavaScript. Let's say
05:37Design patterns folder and inside of my JavaScript design patterns folder. I'm gonna go ahead here and create my pseudo chat
05:46Literally creating a very very long path structure now this long path structure means that I'm gonna also have to make sure
05:52That it actually exists or not before because I have to make sure that the comp
05:57Variable exists that the o2 geek exists that the packed exists and so on and so forth
06:02But I'm gonna have to start with the comp folder and with a calm
06:05I'm just gonna literally ask if you already have a value great
06:08Don't do anything if there's no value then go ahead and then start assigning a value all the rest of the items
06:15I'm gonna have to create a structure that literally walks through each item
06:19Checking to see if there's an item inside of them
06:21Maybe I created something already
06:22but not for this specific domain or maybe someone else is already using something very similar and
06:28let's go ahead and also do the same for our packed project and
06:31Just to be and let me just as I complete this then I'll walk over just one more thing
06:36Just to cover what the logic here is exactly doing and I'm gonna go ahead here and just override that and override that
06:42Basically creating the full signature making sure that this will exist now
06:47What I've done by this is I made sure that I'm really not gonna step on any one stuff
06:51Nor of myself because I created a very long path now
06:56Obviously, there's a big disadvantage than this advantage in that we're gonna talk about that in a second
07:02I just want to make sure that you get the logic here the logic here of the or condition here
07:06It literally is if the value here comes back is true or any value that isn't false
07:10Then this will never happen
07:12But if the value here is false, then this will be executed and sent to whatever is coming here
07:17So this item would be passed on into the comp folder and that's true for all the remaining lines here from 1 through 4
07:24So that's it. Really? I just want to show you that it's working for this lecture
07:28But we're far from over because in the next lecture, we're gonna see well, is there a better way of doing this?
07:34so I'm gonna just talk here and
07:37And I'm just gonna copy this and just make sure that I
07:40Refreshed here because we need a fresh version here to be able to see this and here we go
07:44Our copy is getting updated in this lesson
07:47We met two different design patterns the object literal design pattern and also the namespace design pattern in the next lesson
07:55We're going to move into the module design pattern the module design pattern enables us to also create privacy
08:01Something that is just not available natively in the basic constructs of JavaScript