Skip to content

Topic: Modules

Jump to bottom
Didier Catz edited this page Jun 23, 2020 · 2 revisions

Modules

During Back-end A1 I made my server.js script super long because I left all the code in that one single file.I already knew that it was possible to split up my code, but I didn’t want to take the risk of destroying my code. Now that I’ve a topic to research, I decided that it would be a good time to research modules.

What are modules?

Modules are like chapters in a book. They are a self-contained cluster of code with one distinct functionality. Because modules self-contained they be added in other blocks of code whenever necessary.

Short history of modules

Back in the day, Javascript programs were quite small. They were mainly used for one small task or to provide a little bit of interactivity for the users. As time went by the demands for Javascript grew and grew so the scripts also grew in size. At one point the scripts became so huge that it wasn’t readable anymore. To fix this people started to create special libraries (AMD, CommonJS) that enabled the script to be separated into multiple smaller files.

This concept of separating code into multiple files went on to be to be a great success. It became a common practice to enable these libraries in scripts. Therefor modules were included in the big Javascript update of ES6. Now you could use modules right out of the gate with Javascript.

When to use modules?

The most common use case for a default export is a module that contains a single function or a single class. With our project we decided to make a module for each big function. To keep things organised we also named the module filenames the same as the functions.

Where to put modules?

In our project we used a router. The router splits-up the routes and as you can see at the top of the page, functions from other modules are being included. the modules are in a folder called routes, each major function has it's own page which in turn has it's own module. That's how we've set up our project. Below you can see a screenshot i've made of how it looks like:

File structure

At the top of the script you import either the full module, or or you import certain functions

How to use modules?

- Export

Alright so let’s say you’ve made your function and put it into it’s own file. The next thing you’ll want to is exporting that function into another one.

To do this you need to put this at the bottom at the page:

Export {function}

- Import

Next is importing that function into another file. To do this you need to import the modules at the top of the page. To do this you need to put the following code: import {function}

Example

Below is the module with a function called message. For this example let's keep it simple and only alert the message: hello with the inserted name after it. The module is in a folder called modules and file is called messages.

const function message(name) {
  console.log('Hello ',name);
}

export{message}

Next we'll import it in another file:

import{message} from './modules/messages.js';

message('Max');

Now the file will output the following once the file is loaded into a browser:

// Hello Max

Summery

To wrap it all up, modules are simply just files that contain one or more functions that accomplish a specific goal. They help to maintain the overall code readable by separating the code into multiple files. You can export the functions and import those functions in other files.

Sources:

Clone this wiki locally