Detailed Explanation of JavaScript ES6 Module Module
- 2021-11-29 23:00:10
- OfStack
0. What is Module
Historically, JavaScript 1 has no module (module) system, so it is impossible to split a large program into small files that depend on each other and then assemble them with simple methods. Other languages have this function, such as require of Ruby, import of Python, and even CSS has @ import, but JavaScript has no support in this area, which poses a huge obstacle to the development of large and complex projects.
Before ES6, the community worked out a number of module loading schemes, the most important of which were CommonJS and AMD. The design idea of ES6 module is as static as possible, so that the dependencies of modules and input and output variables can be determined at compile time. The ES6 module is not an object, but the output code is explicitly specified by the export command, and then input by the import command.
The main problems solved by the module system are as follows:
The problem of modularization Eliminate global variables Manage Load Sequence
1. Loading of Module
Use < script > Tag loading module needs to add type = "module".
1.1 Mode 1
<script type="module">
import module from "./module.js";
</script>
1.2 Mode 2
<script src="./module.js" type="module"></script>
2. Export and Import
2.1 Exports of 1 modules can be imported and accessed by other modules.
Example 1: Use About. js to call the Base object within Base. js and print it on the front page.
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 if you don't export it
Example 2: About. js does not export, but imports it on the home page.
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 1 default value, only 1 per module.
When exporting using export default, the name of import is optional.
Example 4: Use export default for export, and the name of import is arbitrary.
index.html
<script src="./module.js" type="module"></script>
About.js
<script src="./module.js" type="module"></script>
Output:
Hello World!
4. export and corresponding import
When exporting with export, the name of import cannot be given at will.
Example 5: Export using export.
index.html
<script src="./module.js" type="module"></script>
About.js
const age = 18;
export {age};
// export age; ×
// export const age = 18; Tick
export const nick = 'admin';
Output:
admin 18
5. Considerations for Module
1. In the module, the top this points to undefined;;
2import has a lifting effect, which will be lifted to the head of the whole module and take the lead in execution;
3. When import executes, the code has not yet been executed;
4. import and export can only be executed at the top level of the module and cannot be executed in a code block;
5. import () can be imported conditionally;
6. Exported by compound writing and cannot be used in the current module
Compound writing, import and export:
<script src="./module.js" type="module"></script>
Summarize
This article is here, I hope to give you help, but also hope that you can pay more attention to this site more content!