JavaScript ES6 Module Detailed Explanation

0. What is Module

Historically, JavaScript has not had a module system, making it impossible to split a large program into small, interdependent files and then assemble them together in a simple way. Other languages ​​have this feature, such as Ruby's require, Python's import, and even CSS has @import, but JavaScript does not have any support in this regard, which has become a huge obstacle to the development of large and complex projects.

Before ES6, the community developed some module loading solutions, the most important of which were CommonJS and AMD. The design idea of ​​ES6 modules is to be as static as possible, so that the module dependencies, as well as the input and output variables, can be determined at compile time. ES6 modules are not objects, but are code that is explicitly specified for output through the export command and then imported through the import command.

The main problems solved by the module system are:

• The problem with modularity
• Eliminate global variables
• Managing Load Order

1.Module loading

When using the <script> tag to load a module, you need to add type="module".

1.1 Method 1

<script type="module">
    import module from "./module.js";
</script>

1.2 Method 2

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

2. Export and Import

2.1 The exports of a module can be imported and accessed by other modules.

Example 1: Use About.js to call the Base object in Base.js and print it on the homepage.

index.html

<script type="module">
    import About from "./js/About.js";
    console.log(About);
</script>

Base.js

const Base = {
    nick: 'admin',
    age: 19
}
export default Base;

About.js

import Base from '../js/Base.js';
const src = `nick:${Base.nick},age:${Base.age}.`;
export default src;

Output:

nick:admin,age:19.

2.2 You can import it even if it is not exported

Example 2: About.js is not exported and is imported on the homepage.

index.html

<script type="module">
    import "./js/About.js";
</script>

About.js

const src = 'Hello World!';
console.log(src);

Output:

Hello World!

2.3 The imported code will be executed once and only once

Example 3: Import About.js three times and observe the export results.

index.html

<script type="module">
    import "./js/About.js";
    import "./js/About.js";
    import "./js/About.js";
</script>

About.js

const src = 'Hello World!';
console.log(src);

Output:

Hello World!

3. export default and corresponding import

export default is used to export a default value. A module can only have one.

When using export default to export, the import name can be anything you want.

Example 4: Use export default to export and give any name to import.

index.html

<script type="module">
    import bbb from "./js/About.js";
    console.log(bbb);
</script>

About.js

const src = 'Hello World!';
export default src;

Output:

Hello World!

4. Export and corresponding import

When using export to export, the name of the import cannot be arbitrary.

Example 5: Use export to export.

index.html

<script type="module">
    import { age, nick } from "./js/About.js";
    console.log(nick, age);
</script>

About.js

const age = 18;
export {age};
// export age; ×
// export const age = 18; √
export const nick = 'admin';

Output:

admin 18

5. Notes on Module

1. In the module, the top-level this points to undefined;

2import has a promotion effect, which will be promoted to the head of the entire module and executed first;

3. When import is executed, the code has not yet been executed;

4. Import and export can only be executed at the top level of a module, not in a code block;

5.import() can be imported conditionally;

6. The composite writing method is exported and cannot be used in the current module

Composite writing, import and then export:

export About from './js/About.js';

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!