WEBVTT 00:01.590 --> 00:06.600 As I have already mentioned throughout the project, we are going to write a really big code, therefore, 00:06.600 --> 00:12.810 in order to manage this code well and also not to get lost in it, we need definitely some how to organize 00:12.810 --> 00:13.970 it in kind of a different way. 00:14.670 --> 00:20.400 JavaScript offers us to use several types of patterns and I'm going to use one of them, which is module 00:20.400 --> 00:20.820 pattern. 00:21.660 --> 00:23.610 This approach is very popular today. 00:24.000 --> 00:29.640 Lots of libraries use model patterns because it's very handy and it allows us to write, organize, 00:29.640 --> 00:33.900 save and nicely structured code, which is simple to read and understand. 00:33.900 --> 00:37.140 And at the same time, it's a very flexible module. 00:37.140 --> 00:42.870 Pattern also gives us ability to avoid declaring lots of global variables and functions. 00:43.290 --> 00:48.390 Also this variable and prototypes, which makes the code more difficult to write and understand. 00:49.530 --> 00:56.460 Unlike other programming languages like C, Sharp, Java and more, JavaScript doesn't define concepts 00:56.460 --> 00:57.600 like private and public. 00:58.200 --> 01:03.930 But using the immersion module pattern, we are able to somehow define the variables and functions as 01:03.930 --> 01:05.350 private and public as well. 01:06.900 --> 01:13.050 One thing to note regarding module pattern is that you need definitely to understand how it is kilojoules 01:13.050 --> 01:17.870 and scopes to work in JavaScript because the module pattern works based on them. 01:18.780 --> 01:24.210 Those concepts were described in depth in previous lectures, so I'm sure that you won't have any trouble 01:24.210 --> 01:27.060 in understanding how module pattern actually works. 01:27.870 --> 01:34.320 All right, let's see how to create module and at the same time, let's prepare it for our application. 01:34.920 --> 01:40.890 In order to create a module, we need to use immediately invoked function expression because it is a 01:40.890 --> 01:42.320 great tool in JavaScript. 01:42.600 --> 01:47.240 It allows us to encapsulate things together and make the code separated. 01:47.250 --> 01:50.400 And also, this is a great way to avoid naming conflicts. 01:51.170 --> 01:55.140 Okay, let's create variable and call it quits controller 01:57.600 --> 02:05.080 as a value I'm going to assign to it if he this right function and surround the whole function with 02:05.080 --> 02:05.790 the parentheses. 02:08.850 --> 02:16.260 You remember that if these are invoked immediately after defining, so we need to place at the end parentheses, 02:17.110 --> 02:20.120 all right, let's create variable inside function. 02:20.790 --> 02:27.270 I'm going to call it private because it actually exists in local scope of function and it's not accessible 02:27.270 --> 02:28.080 from outside. 02:28.350 --> 02:28.670 Right. 02:28.670 --> 02:30.420 Of private equals to 10. 02:31.710 --> 02:38.970 In the same way, let's create a function inside Effi and call it private function variable, private 02:38.970 --> 02:41.220 F and equals two function. 02:41.970 --> 02:45.480 And inside the parentheses, let's pass the parameter. 02:45.750 --> 02:46.680 For example, eight. 02:48.120 --> 02:54.000 We call it private function because it's like a private variable which is not accessible from outer 02:54.000 --> 02:57.750 environment and we can invoke it only inside Effi. 02:58.500 --> 03:03.330 Then inside the calibrates is a right, a written statement, a plus private. 03:06.080 --> 03:11.870 All right, besides the price, variables and functions, we can create public methods and properties 03:11.870 --> 03:18.830 inside EFFI, which will have access on private variable functions and also it will be accessible itself 03:18.830 --> 03:19.610 from outside. 03:20.360 --> 03:25.280 In order to do that, we need to use the witness statement more precisely. 03:25.280 --> 03:31.040 We need to return an object and then to assign methods and properties to that object. 03:31.440 --> 03:34.610 So right to return, then open the. 03:36.220 --> 03:36.730 All right. 03:36.740 --> 03:38.900 The method covid public method. 03:41.170 --> 03:42.550 Assigned to it function. 03:45.980 --> 03:49.620 And inside this method, let's call it private function. 03:49.640 --> 03:54.710 So use again the a statement to return private function. 03:57.410 --> 04:04.940 And inside the parentheses, let's ride the argument, for example, 20 in this case, public method 04:04.940 --> 04:07.430 will be accessible from outer environment. 04:08.030 --> 04:17.930 In order to prove that, let's first go to the browser, then inspect the page and write in console 04:18.680 --> 04:19.430 controller. 04:21.150 --> 04:22.830 That public method. 04:26.180 --> 04:29.240 So you see that we have here 30. 04:30.890 --> 04:37.640 OK, let me explain again when the code is run, JavaScript engine goes through the code line by line. 04:38.270 --> 04:45.350 When it switches to this parenthesis, it immediately invokes the function, the code block inside it 04:45.350 --> 04:51.080 is executed and Cui's controller variable gets as a value return object. 04:52.130 --> 04:59.510 But because of the closures, the method inside this object has still access on this private variable 04:59.510 --> 05:00.180 and function. 05:01.310 --> 05:03.080 That's why we get 30. 05:04.170 --> 05:05.050 Makes sense. 05:06.870 --> 05:13.080 All right, it may seem complicated, but you already know everything in order to understand how this 05:13.080 --> 05:13.740 model works. 05:14.490 --> 05:14.910 All right. 05:15.720 --> 05:21.870 For our application, we need to create two other modules and all needed code, which we will write 05:21.870 --> 05:22.200 throughout. 05:22.200 --> 05:25.420 The project will be distributed in those three modules. 05:26.160 --> 05:31.550 So let's create next one, and I'm going to call it UI controller. 05:33.580 --> 05:41.800 It stands for user interface controller and let's assign again to this variable immediately invoked 05:41.800 --> 05:42.790 function expression. 05:45.890 --> 05:56.090 And now create third module and call it controller and in the same way assigned to it if it again. 05:59.530 --> 06:07.210 All right, so we have just created all needed modules and now I'm going to explain what will be the 06:07.210 --> 06:11.030 task of each of these modules, Enquist controller. 06:11.410 --> 06:18.610 We will work on data, which then will be appeared on user interface, and this will be managed from 06:18.620 --> 06:19.580 UI controller. 06:20.590 --> 06:27.940 These two modules, I mean, Chris controller and UI controller will work independently, but using 06:27.950 --> 06:33.510 third module, which is controller UI controller will receive data from Chris Controller. 06:34.090 --> 06:41.380 In other words, Chris Controller and UI controller doesn't know about existing each other, but using 06:41.380 --> 06:44.800 controller module, we will set up the relationship between them. 06:45.700 --> 06:53.530 In order to do that, we need to define for controller module parameters and then it will receive as 06:53.530 --> 06:54.190 arguments. 06:54.190 --> 06:56.500 Chris, controller and UI controller. 06:57.160 --> 07:04.210 So right inside the parentheses, Chris controller in a little different way because it is a parameter 07:05.860 --> 07:07.540 then, right, UI controller. 07:11.790 --> 07:23.070 And then as for the arguments, let's pass here, Chris, controller and that are controller, all right. 07:23.740 --> 07:28.950 After that, we already have access on Chris Controller and on UI controller as well. 07:29.550 --> 07:37.680 In order to demonstrate it, I'm going to create inside UI controller the variable, but number one 07:37.680 --> 07:38.880 equals to 30. 07:40.890 --> 07:48.300 Then in return statement, which actually returns an object, create the method right to return, then 07:48.300 --> 07:51.660 open the calibrations and write the name of the method. 07:51.660 --> 08:04.230 Some then write function and pass the parameter as number two and then write a written statement. 08:04.830 --> 08:06.450 Number one plus number two. 08:09.930 --> 08:17.370 OK, now we can invoke this function from control module because it is a part of written object, therefore 08:17.370 --> 08:18.770 it becomes public method. 08:19.110 --> 08:30.300 So right inside control the module, console that, log that UI controller dot some and pushier the 08:30.300 --> 08:32.340 argument, for example, 100. 08:37.940 --> 08:39.050 Reload the page. 08:40.610 --> 08:48.890 We got one hundred and thirty, so it works, as we said, we have access on both controllers from controller 08:48.890 --> 08:49.300 module. 08:49.640 --> 08:55.970 So we are able to function from qu'est controller as well, right inside the parenthesis. 08:55.970 --> 09:01.280 Plus, Chris, control the dart public method. 09:04.400 --> 09:09.860 Then reload the page and here we go, we have 160. 09:11.180 --> 09:18.170 All right, so we have invoked successfully public methods from quiz control and from UI controller 09:18.170 --> 09:18.580 as well. 09:19.250 --> 09:22.070 This is a way how a module pattern works in JavaScript. 09:22.710 --> 09:25.500 It allows us to write, organize and safe code. 09:25.530 --> 09:27.650 Also, it's simple to read and understand. 09:28.130 --> 09:34.130 And the real power of this pattern, you will clearly see when the amount of code will increase step 09:34.130 --> 09:36.680 by step during building our application. 09:38.300 --> 09:39.730 OK, let's move on.