Hi everyone, this is my first post here! So I encourage you to be comprehensive with my bad writing skills :)
That being said, let’s start!
So, AMD, is not what you are thinking (Advanced Micro Devices), it actually stands for Asynchronous Module Definition. AMD definitions makes your modules faster to load, organizes your app, and let’s you load modules only when you need them.
I suggest you read this presentation about AMD as it helps you understand what is it, and how you can use it.
But no worries, I’ll explain that too!
To define a module, you need:
- To define a dependency list (or not), that needs to be load in order to use this module.
Now that we have our module working, let’s learn how to load it, and that’s where require comes in.
In order to load a module, with its dependencies, asynchronously and only when you really need it, you need to use require as this:
To load a module, you need:
- To ask for what modules you need using require
- Once they are loaded, use them!!
Yup, that’s it.
Notice that the function using the modules, is a callback function, that means, it won’t execute until all modules finished loading.
Now let’s see some actual code.
First, you need to download RequireJS.
Once you downloaded it, create an index.html with a head that looks like this:
In this simple expample, our Structure is very very super! basic.
Let’s take a look at main.js
As we said before, we ask require for the modules we want to use (movie) and create a callback function (funciton(movie)) to use it. Here we are just seting its name to terminator, since is an awesome movie.
Now let’s take a look at movie.js
Let’s see the code:
First, we declare our dependencies (in this case, since we don’t have any, we just ommit them), then, we have the option to declare a module with a name. In this case I called it movie. And after that, the declaration of the module itself.
There are a few ways to do this, but to make the post shorter, I’ll explain one, using constructor, prototype, private vars, etc.
This code just creates a variable, called Movie, of type function, so it takes its prototype.
After that, we create a simple private variable that we’ll use as a hash table.
And then, we extend the prototype of the Movie variable.
We specify its constructor function (Wich is called Movie if you remember). After that we add two methos to set and get the values from our private variables.
And once we are done, we return our module :
There are several discussion topics in the last code, I encourage you to read about prototypes if you are interested on how they work.
And Here is my github code that shows something very similar to what is shown on this post
Ok that’s it for today, I hope I didn’t bored you to death and see you next time!