As I have already mentioned throughout the project, we are going to write a really big code, therefore,
in order to manage this code well and also not to get lost in it, we need definitely some how to organize
it in kind of a different way.
JavaScript offers us to use several types of patterns and I'm going to use one of them, which is module
pattern.
This approach is very popular today.
Lots of libraries use model patterns because it's very handy and it allows us to write, organize,
save and nicely structured code, which is simple to read and understand.
And at the same time, it's a very flexible module.
Pattern also gives us ability to avoid declaring lots of global variables and functions.
Also this variable and prototypes, which makes the code more difficult to write and understand.
Unlike other programming languages like C, Sharp, Java and more, JavaScript doesn't define concepts
like private and public.
But using the immersion module pattern, we are able to somehow define the variables and functions as
private and public as well.
One thing to note regarding module pattern is that you need definitely to understand how it is kilojoules
and scopes to work in JavaScript because the module pattern works based on them.
Those concepts were described in depth in previous lectures, so I'm sure that you won't have any trouble
in understanding how module pattern actually works.
All right, let's see how to create module and at the same time, let's prepare it for our application.
In order to create a module, we need to use immediately invoked function expression because it is a
great tool in JavaScript.
It allows us to encapsulate things together and make the code separated.
And also, this is a great way to avoid naming conflicts.
Okay, let's create variable and call it quits controller
as a value I'm going to assign to it if he this right function and surround the whole function with
the parentheses.
You remember that if these are invoked immediately after defining, so we need to place at the end parentheses,
all right, let's create variable inside function.
I'm going to call it private because it actually exists in local scope of function and it's not accessible
from outside.
Right.
Of private equals to 10.
In the same way, let's create a function inside Effi and call it private function variable, private
F and equals two function.
And inside the parentheses, let's pass the parameter.
For example, eight.
We call it private function because it's like a private variable which is not accessible from outer
environment and we can invoke it only inside Effi.
Then inside the calibrates is a right, a written statement, a plus private.
All right, besides the price, variables and functions, we can create public methods and properties
inside EFFI, which will have access on private variable functions and also it will be accessible itself
from outside.
In order to do that, we need to use the witness statement more precisely.
We need to return an object and then to assign methods and properties to that object.
So right to return, then open the.
All right.
The method covid public method.
Assigned to it function.
And inside this method, let's call it private function.
So use again the a statement to return private function.
And inside the parentheses, let's ride the argument, for example, 20 in this case, public method
will be accessible from outer environment.
In order to prove that, let's first go to the browser, then inspect the page and write in console
controller.
That public method.
So you see that we have here 30.
OK, let me explain again when the code is run, JavaScript engine goes through the code line by line.
When it switches to this parenthesis, it immediately invokes the function, the code block inside it
is executed and Cui's controller variable gets as a value return object.
But because of the closures, the method inside this object has still access on this private variable
and function.
That's why we get 30.
Makes sense.
All right, it may seem complicated, but you already know everything in order to understand how this
model works.
All right.
For our application, we need to create two other modules and all needed code, which we will write
throughout.
The project will be distributed in those three modules.
So let's create next one, and I'm going to call it UI controller.
It stands for user interface controller and let's assign again to this variable immediately invoked
function expression.
And now create third module and call it controller and in the same way assigned to it if it again.
All right, so we have just created all needed modules and now I'm going to explain what will be the
task of each of these modules, Enquist controller.
We will work on data, which then will be appeared on user interface, and this will be managed from
UI controller.
These two modules, I mean, Chris controller and UI controller will work independently, but using
third module, which is controller UI controller will receive data from Chris Controller.
In other words, Chris Controller and UI controller doesn't know about existing each other, but using
controller module, we will set up the relationship between them.
In order to do that, we need to define for controller module parameters and then it will receive as
arguments.
Chris, controller and UI controller.
So right inside the parentheses, Chris controller in a little different way because it is a parameter
then, right, UI controller.
And then as for the arguments, let's pass here, Chris, controller and that are controller, all right.
After that, we already have access on Chris Controller and on UI controller as well.
In order to demonstrate it, I'm going to create inside UI controller the variable, but number one
equals to 30.
Then in return statement, which actually returns an object, create the method right to return, then
open the calibrations and write the name of the method.
Some then write function and pass the parameter as number two and then write a written statement.
Number one plus number two.
OK, now we can invoke this function from control module because it is a part of written object, therefore
it becomes public method.
So right inside control the module, console that, log that UI controller dot some and pushier the
argument, for example, 100.
Reload the page.
We got one hundred and thirty, so it works, as we said, we have access on both controllers from controller
module.
So we are able to function from qu'est controller as well, right inside the parenthesis.
Plus, Chris, control the dart public method.
Then reload the page and here we go, we have 160.
All right, so we have invoked successfully public methods from quiz control and from UI controller
as well.
This is a way how a module pattern works in JavaScript.
It allows us to write, organize and safe code.
Also, it's simple to read and understand.
And the real power of this pattern, you will clearly see when the amount of code will increase step
by step during building our application.
OK, let's move on.