Now regarding modules, there are a couple of alternative syntaxes and I want to show you which syntaxes
exist.
Let's say we have more than one thing which we want to export,
here in the DOM helper, I only have the DOM helper class,
now let's say we would not have that class as a wrapper but we would export two individual functions.
We could just copy these functions, remove static here and instead add the function keyword for example
and we'd be good,
these are two functions and we could have created them as function expressions with for example arrow
functions stored in a constant as well.
Now these functions can also be exported by adding an export keyword, you can export everything; functions,
classes, constants, variables, everything which you use in your code like this.
So now we export these functions, both of them and still also the class
and that's absolutely fine,
you can export as much as you want.
Now in project list where we need the DOM helper, down there I'm using move element.
Now we also now export a move element
function, this one here
so I could also just use that.
So in project list, we could remove DOMhelper. and just access move element
but of course this would fail because we're not importing it,
we're referencing this function but it's not getting imported anywhere.
Now you might say I am importing from DOM helper but imports don't work
file wide,
instead you really have to specify what you import
and here, we're importing the DOM help helper class, not the move element function.
So therefore if we save this, our code would fail, as soon as I drag and drop, we get an error that move
element is not defined.
So just importing from a file is not enough,
you need to be specific what you import, you don't import the entire file content.
So here the solution of course would be to switch DOM helper, which I'm not using in this file anymore,
to move element and now I'm importing that function which I'm referencing further down below
and with that import added, if we now reload, this works again.
So this is important to know, that you have to be really specific regarding what you import and that
you can export more than one thing.
You also therefore of course can import more than one thing,
if we would still need the DOM helper class in here, we could simply separate it with a comma and then
import it as well
and now we're importing DOM helper and move element from the DOMhelper.js file,
we're not importing the clear event listener function for example though, that's not happening.
So we're very specific about what we need and we specify it in a comma separated list here in our import
statement. Sometimes you do want to import everything that's in a file, let's say here in project list,
for some reason we want to import this clear event listeners function as well. Obviously
we can do it like this and there would be nothing wrong with that, for a lot of reasons you might want
to do it like this but maybe you want to bundle all these things which are getting exported by this
file in one object which you then have available in the projectlist.js file on which you
can access these different exported features through the dot notation and that is possible with a
special syntax. If you have named exports like we do have it here,
so where you have multiple export statements in front of something, then you can go to the file where you import
that and remove this curly brace list here and instead add a star and then you also add as and then
any name of your choice, like domh or DOMhelper or Domhelp or whatever you want, any name of your
choice here, doesn't have to be the file name
and what this tells Javascript is that you want to bundle together all the exports of that file into
this object
and now in this file, in the projectlist.js file in this case here,
you can and you have to access this bundled object with the dot notation to then access the DOM helper
class for example or the two functions.
So now this looks like you're using an object with a move element method,
instead we just bundled all exports of the DOM helper file together into one helper object which
exists in the projectlist.js file
so to say. So this is an alternative which you can use if you prefer that for whatever reason,
this is how you can bundle multiple exports together and then access them through this helper object
in the importing file. This as notation can also be used in general to assign new names. Let's say, still
here in project list, for some reason I'm not happy with project item here. In projectitem.js, I named
it project item but I don't want to use that name in project list, maybe because I would have a name
clash,
maybe we have some other element, some other constant or class named project item in this file which
we don't want to rename for whatever reason,
so this would result in a clash for example. Whenever you have something like this, you can also assign
an alias to this imported thing. You can use the as keyword here inside of that curly brace list and
assign a new name to that exported
and here, imported element which will only be relevant in this file here.
So here, we could name this to projitem for example
and now inside of this project list file here, we have to use this imported project item under this
alias.
So now in all the places where I create a new project item, where this is the only place, I have to use
projitem instead, my alias.
Now of course, this does not change the name in the original file,
it really just is an alias in this file.
So with that if I save that and I reload, we should still have the same behavior as before because
we haven't changed anything about that logic here,
it's really just an alias which we assigned here.