1 00:00:02,630 --> 00:00:08,720 Now regarding modules, there are a couple of alternative syntaxes and I want to show you which syntaxes 2 00:00:08,720 --> 00:00:10,100 exist. 3 00:00:10,130 --> 00:00:12,890 Let's say we have more than one thing which we want to export, 4 00:00:12,890 --> 00:00:17,000 here in the DOM helper, I only have the DOM helper class, 5 00:00:17,000 --> 00:00:23,870 now let's say we would not have that class as a wrapper but we would export two individual functions. 6 00:00:23,870 --> 00:00:31,910 We could just copy these functions, remove static here and instead add the function keyword for example 7 00:00:32,330 --> 00:00:33,530 and we'd be good, 8 00:00:33,530 --> 00:00:38,810 these are two functions and we could have created them as function expressions with for example arrow 9 00:00:38,810 --> 00:00:42,210 functions stored in a constant as well. 10 00:00:42,230 --> 00:00:48,650 Now these functions can also be exported by adding an export keyword, you can export everything; functions, 11 00:00:48,650 --> 00:00:53,450 classes, constants, variables, everything which you use in your code like this. 12 00:00:53,450 --> 00:00:57,870 So now we export these functions, both of them and still also the class 13 00:00:57,890 --> 00:00:59,120 and that's absolutely fine, 14 00:00:59,120 --> 00:01:01,570 you can export as much as you want. 15 00:01:01,700 --> 00:01:07,930 Now in project list where we need the DOM helper, down there I'm using move element. 16 00:01:07,930 --> 00:01:10,930 Now we also now export a move element 17 00:01:10,930 --> 00:01:13,390 function, this one here 18 00:01:13,540 --> 00:01:15,200 so I could also just use that. 19 00:01:15,250 --> 00:01:19,770 So in project list, we could remove DOMhelper. and just access move element 20 00:01:19,800 --> 00:01:23,370 but of course this would fail because we're not importing it, 21 00:01:23,380 --> 00:01:27,670 we're referencing this function but it's not getting imported anywhere. 22 00:01:27,670 --> 00:01:32,640 Now you might say I am importing from DOM helper but imports don't work 23 00:01:32,680 --> 00:01:33,900 file wide, 24 00:01:33,910 --> 00:01:37,360 instead you really have to specify what you import 25 00:01:37,360 --> 00:01:42,580 and here, we're importing the DOM help helper class, not the move element function. 26 00:01:42,580 --> 00:01:47,860 So therefore if we save this, our code would fail, as soon as I drag and drop, we get an error that move 27 00:01:47,890 --> 00:01:49,770 element is not defined. 28 00:01:49,900 --> 00:01:52,810 So just importing from a file is not enough, 29 00:01:52,840 --> 00:01:58,070 you need to be specific what you import, you don't import the entire file content. 30 00:01:58,150 --> 00:02:03,550 So here the solution of course would be to switch DOM helper, which I'm not using in this file anymore, 31 00:02:04,090 --> 00:02:10,150 to move element and now I'm importing that function which I'm referencing further down below 32 00:02:10,150 --> 00:02:15,250 and with that import added, if we now reload, this works again. 33 00:02:15,250 --> 00:02:19,870 So this is important to know, that you have to be really specific regarding what you import and that 34 00:02:19,870 --> 00:02:21,960 you can export more than one thing. 35 00:02:22,210 --> 00:02:24,850 You also therefore of course can import more than one thing, 36 00:02:24,910 --> 00:02:30,580 if we would still need the DOM helper class in here, we could simply separate it with a comma and then 37 00:02:30,580 --> 00:02:31,800 import it as well 38 00:02:31,900 --> 00:02:36,850 and now we're importing DOM helper and move element from the DOMhelper.js file, 39 00:02:37,030 --> 00:02:42,050 we're not importing the clear event listener function for example though, that's not happening. 40 00:02:42,070 --> 00:02:48,340 So we're very specific about what we need and we specify it in a comma separated list here in our import 41 00:02:48,340 --> 00:02:55,150 statement. Sometimes you do want to import everything that's in a file, let's say here in project list, 42 00:02:55,150 --> 00:03:01,420 for some reason we want to import this clear event listeners function as well. Obviously 43 00:03:01,420 --> 00:03:05,920 we can do it like this and there would be nothing wrong with that, for a lot of reasons you might want 44 00:03:05,920 --> 00:03:11,950 to do it like this but maybe you want to bundle all these things which are getting exported by this 45 00:03:11,950 --> 00:03:18,220 file in one object which you then have available in the projectlist.js file on which you 46 00:03:18,220 --> 00:03:24,970 can access these different exported features through the dot notation and that is possible with a 47 00:03:24,970 --> 00:03:30,100 special syntax. If you have named exports like we do have it here, 48 00:03:30,100 --> 00:03:36,580 so where you have multiple export statements in front of something, then you can go to the file where you import 49 00:03:36,580 --> 00:03:45,060 that and remove this curly brace list here and instead add a star and then you also add as and then 50 00:03:45,060 --> 00:03:52,260 any name of your choice, like domh or DOMhelper or Domhelp or whatever you want, any name of your 51 00:03:52,260 --> 00:03:54,680 choice here, doesn't have to be the file name 52 00:03:54,810 --> 00:04:01,170 and what this tells Javascript is that you want to bundle together all the exports of that file into 53 00:04:01,410 --> 00:04:03,280 this object 54 00:04:03,280 --> 00:04:07,080 and now in this file, in the projectlist.js file in this case here, 55 00:04:07,080 --> 00:04:13,310 you can and you have to access this bundled object with the dot notation to then access the DOM helper 56 00:04:13,320 --> 00:04:17,250 class for example or the two functions. 57 00:04:17,250 --> 00:04:20,780 So now this looks like you're using an object with a move element method, 58 00:04:21,150 --> 00:04:27,360 instead we just bundled all exports of the DOM helper file together into one helper object which 59 00:04:27,360 --> 00:04:29,430 exists in the projectlist.js file 60 00:04:29,430 --> 00:04:34,980 so to say. So this is an alternative which you can use if you prefer that for whatever reason, 61 00:04:34,980 --> 00:04:40,320 this is how you can bundle multiple exports together and then access them through this helper object 62 00:04:40,560 --> 00:04:50,420 in the importing file. This as notation can also be used in general to assign new names. Let's say, still 63 00:04:50,420 --> 00:04:56,840 here in project list, for some reason I'm not happy with project item here. In projectitem.js, I named 64 00:04:56,840 --> 00:05:02,180 it project item but I don't want to use that name in project list, maybe because I would have a name 65 00:05:02,180 --> 00:05:02,760 clash, 66 00:05:02,780 --> 00:05:10,610 maybe we have some other element, some other constant or class named project item in this file which 67 00:05:10,610 --> 00:05:13,330 we don't want to rename for whatever reason, 68 00:05:13,370 --> 00:05:18,890 so this would result in a clash for example. Whenever you have something like this, you can also assign 69 00:05:18,920 --> 00:05:25,700 an alias to this imported thing. You can use the as keyword here inside of that curly brace list and 70 00:05:25,700 --> 00:05:28,090 assign a new name to that exported 71 00:05:28,100 --> 00:05:33,190 and here, imported element which will only be relevant in this file here. 72 00:05:33,230 --> 00:05:36,540 So here, we could name this to projitem for example 73 00:05:36,710 --> 00:05:43,190 and now inside of this project list file here, we have to use this imported project item under this 74 00:05:43,280 --> 00:05:44,640 alias. 75 00:05:44,660 --> 00:05:50,000 So now in all the places where I create a new project item, where this is the only place, I have to use 76 00:05:50,000 --> 00:05:52,660 projitem instead, my alias. 77 00:05:52,700 --> 00:05:55,940 Now of course, this does not change the name in the original file, 78 00:05:55,940 --> 00:05:58,870 it really just is an alias in this file. 79 00:05:58,940 --> 00:06:04,370 So with that if I save that and I reload, we should still have the same behavior as before because 80 00:06:04,400 --> 00:06:07,790 we haven't changed anything about that logic here, 81 00:06:07,820 --> 00:06:10,220 it's really just an alias which we assigned here.