General Questions About Modules

JavaScript
1

  1. Is it standard practice to use only one module <script type="module"> per external file? For example, say I have a file modules.js with several different blocks of <script type="module">, and in my main index.js file I append <script type="module" src="modules.js", will it import all the different blocks from the modules.js file? Is this improper practice?

  2. I read that if a module is exported multiple times, it will only run its code on the first import. Does that mean that the second receiving file can’t call functions from the imported <script>?

  3. In order to import an entire module, do we have to give any kind of export command in that module, or do we simply append <script type="module src="modules.js" into the destination <script>?

2

A modules.js is just going to have JavaScript and no script elements.

The script element goes in the the html file and links to index.js

<script src="index.js" type="module"></script>

Let’s say you have a calculator app that has various functions add, multiply, divide, subtract, etc… You could put each of these functions in separate JS files. Each file would export the function and then in index.js you would import each of them in.

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Calculator</title>
</head>

<body>
  <script src="index.js" type="module"></script>
</body>

</html>

index.js

import add from './add.js';
import subtract from './subtract.js';
import multiply from './multiply.js';
import divide from './divide.js';

// code to use functions

add.js

function add(a, b) {
  return a + b;
}

export default add;

subtract.js

function subtract(a, b) {
  return a - b;
}

export default subtract;

multiply.js

function multiply(a, b) {
  return a * b;
}

export default multiply;

divide.js

function divide(a, b) {
  return a / b;
}

export default divide;

You could also have another file calc-functions.js that imports all of those functions instead and then exports them as a module. In this case index.js would look like:

import {
  add,
  subtract,
  multiply,
  divide
} from './calc-functions.js';

// code to use functions

and calc-functions.js would look like:

import add from './add.js';
import subtract from './subtract.js';
import multiply from './multiply.js';
import divide from './divide.js';

export {
  add,
  subtract,
  multiply,
  divide
};
1 Like
3

A module is a file with one or more import and/or export declarations in it, if it doesn’t have either of those it’s a script, not a module.

It caches the code (otherwise the browser would be storing multiple versions of the same thing), but that cached code can be used in multiple different places. Essentially, you get an object with some properties/functions attached to it when you omport something, same as any JS it can be used in multiple places.

You’d often just have one main file (module) referenced in the HTML, and that kicks everything off, imports the bits you need, exported from other JS files, which import from other ones etc. Context sensitive (you can have as many script tags as you want in an HTML file), but it normally keeps things sane having a single entry point.

2 Likes
4

Thank you so much for the detailed explanations, @RandellDawson and @DanCouper. I frequently see your guys’ posts. This was my first time hearing from Randell. Dan actually answered one of my previous questions about Decorators and Forwarding. FCC is such a great community. Have a great weekend, guys.