ES6 introduces modularity, which is divided into two modules: export @ and import.
ES6 modular features:
(1) The module of ES6 automatically turns on the strict mode, whether you add use strict; to the module header or not;.
(2) The module can import and export various types of variables, such as functions, objects, strings, numbers, Boolean values, classes, etc.
(3) Each module has its own context. The variables declared in each module are local variables and will not pollute the global scope.
(4) Each module is loaded only once (it is a single instance). If you load the same file in the same directory, you can read it directly from memory.
1, export and import are basically used
The export command is used for export and the Import command is used for import:
module1.js
// export let name = "Monkey King";
// export let sex = "male";
//or
let name = "Sun WuKong";
let sex = "male";
export {name,sex};
test1.js
// import { name,sex } from "../export/module1.js";
// console.log(name); // Sun WuKong
// console.log(sex); // male
//Or import some variables
import { sex } from "../export/module1.js";
console.log(sex); //male
Demo01.html
<!--
module1.js:Module code,adopt export Exposure variable
test1.js:Import module1.js Supplied variables
Demo01.html:introduce test1.js content
-->
<script type="module" src="import/test1.js"></script>
2, Direct import module in web page
module1.js
// export let name = "Monkey King";
// export let sex = "male";
//or
let name = "Sun WuKong";
let sex = "male";
export {name,sex};
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Web page import modular</title>
</head>
<body>
<h1>full name:<span id="spanName"></span></h1>
<h1>Gender:<span id="spanSex"></span></h1>
</body>
</html>
<!--
module1.js:Module code,adopt export Exposure variable
Demo02.html:Import module1.js Supplied variables
-->
<script type="module">
import {name,sex} from "./export/module1.js";
document.getElementById("spanName").innerHTML = name;
document.getElementById("spanSex").innerHTML = sex;
</script>
3, Use of as
(1) Usage of as in export: variables use aliases to hide variables inside the module
module2.js:
let name = "Sun WuKong";
let sex = "male";
export {name as expName,sex as expSex};
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>as stay export Usage in</title>
</head>
<body>
<h1>full name:<span id="spanName"></span></h1>
<h1>Gender:<span id="spanSex"></span></h1>
</body>
</html>
<!--
module2.js:Module code,adopt export Exposure variable(Variable use alias,Hide variables inside the module)
Demo03.html:Import module2.js Supplied variables
-->
<script type="module">
import {expName,expSex} from "./export/module2.js";
document.getElementById("spanName").innerHTML = expName;
document.getElementById("spanSex").innerHTML = expSex;
</script>
(2) Usage of as in import: import variables of multiple modules and use as to resolve naming conflicts.
module1.js
// export let name = "Monkey King";
// export let sex = "male";
//or
let name = "Sun WuKong";
let sex = "male";
export {name,sex};
module3.js
// export let name = "Monkey King";
// export let sex = "male";
//or
let name = "Zhu Bajie";
let sex = "male";
export {name,sex};
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>as stay import Usage in</title>
</head>
<body>
<h1>full name:<span id="spanName1"></span></h1>
<h1>Gender:<span id="spanSex1"></span></h1>
<hr />
<h1>full name:<span id="spanName2"></span></h1>
<h1>Gender:<span id="spanSex2"></span></h1>
</body>
</html>
<!--
module1.js:Module code(expose name,sex)
module3.js:Module code(expose name,sex)
Demo04.html:Import variables for both modules,use as Resolve naming conflicts
-->
<script type="module">
import {name as name1,sex as sex1} from "./export/module1.js";
import {name as name2,sex as sex2} from "./export/module3.js";
document.getElementById("spanName1").innerHTML = name1;
document.getElementById("spanSex1").innerHTML = sex1;
document.getElementById("spanName2").innerHTML = name2;
document.getElementById("spanSex2").innerHTML = sex2;
</script>
4, Import functions and classes in modules
(1) Functions in import module
module4.js
// function Add(...items)
// {
// let sum = 0;
// for(let item of items)
// {
// sum += item;
// }
// return sum;
// }
// export{Add};
//or
export function Add(...items)
{
let sum = 0;
for(let item of items)
{
sum += item;
}
return sum;
};
HTML
<script type="module">
//Import function
import {Add} from './export/module4.js';
let result = Add(1,2,3,4,5);
console.log(result); //15
</script>
(2) Classes in import module:
module4.js
// class Student
// {
// constructor(stuno,stuname)
// {
// this.stuno = stuno;
// this.stuname = stuname;
// }
// sayHi()
// {
// console.log("Hello everyone, I'm" + this.stuname + ", and my student number is" + this. StuNo ");
// }
// }
// export {Student};
//or
export class Student
{
constructor(stuno,stuname)
{
this.stuno = stuno;
this.stuname = stuname;
}
sayHi()
{
console.log("hello everyone,I am"+this.stuname+",My student number is"+this.stuno);
}
}
HTML
<script type="module">
//Import class
import {Student} from './export/module4.js';
let stu = new Student("001","Sun WuKong");
stu.sayHi();
</script>
5, Characteristics of import
module5.js
let name = "Sun WuKong";
let sex = "male";
let emp = {name:"Sun WuKong",sex:"male"};
export {name,sex,emp};
HTML
<script type="module">
//Read only feature
//import {name,sex,emp} from './export/module5.js';
//(1) Values of common types cannot be changed
// name = "pig Bajie"// report errors
// sex = "male"// report errors
//(2) The object cannot be changed directly
//emp = {name: "pig Bajie", sex: "male"};
//(3) You can change the attribute value of a variable
// emp.name = "pig Bajie";
// emp.sex = "male";
//Single case characteristics
//(1) The following two sentences import will be executed only once
//import {name,sex,emp} from './export/module5.js';
//import {name,sex,emp} from './export/module5.js';
//(2) The following two sentences import is equivalent to import {name, sex} from '/ export/module5. js';
// import {name} from './export/module5.js';
// import {sex} from './export/module5.js';
//Static characteristics
//(1) Expressions are not supported
//import {"na"+"me"} from './export/module5.js'; // report errors
//(2) The following codes are not supported for dynamic import
// if(true)
// import {name,sex} from './export/module5.js';
// else
// import {emp} from './export/module5.js';
</script>
6, Overall import loading of the module
module5.js
let name = "Sun WuKong";
let sex = "male";
let emp = {name:"Sun WuKong",sex:"male"};
export {name,sex,emp};
HTML
<script type="module"> //Load all exposed contents in module5 import * as test from './export/module5.js'; console.log(test.name); console.log(test.emp.name); </script>
7, export default command
When using the import command, the user needs to know the name of the variable or function to be loaded, otherwise it cannot be loaded, and the export default is exposed
Members can use any variable to receive and solve the above problems.
export default command features:
(1) In a file or module, there can be multiple exports and import s, and only one export default.
(2) Default in export default is the corresponding export interface variable.
(3) The {} symbol is not required for import and export.
(4) export default is an exposed member, which can be received with any variable.
(1) export default export variables
module6.js
//export default export variables do not require var //export var a = 10; // correct // correct var a = 10; export default a; // error //export default var a = 10;
HTML
<script type="module"> //Accept default variables import b from './export/module6.js'; //Any variable (b) can be accepted here console.log(b); </script>
(2) export default export function
module6.js
function Add(...items)
{
let sum = 0;
for(let item of items)
{
sum += item;
}
return sum;
}
//Add here does not need {}
export default Add
HTML
<script type="module"> //Accept default function import sum from './export/module6.js'; //Any variable (sum) can be accepted here let result = sum(1,2,3,4,5); console.log(result); </script>
8, Compound writing of export and import
The first mock exam is export and import can be used in the same module.
(1) Basic syntax for compound use
module1.js
// export let name = "Monkey King";
// export let sex = "male";
//or
let name = "Sun WuKong";
let sex = "male";
export {name,sex};
module7.js
//Compound syntax
let emp = {name:"Zhu Bajie",sex:"male"};
export { name, sex } from './module1.js';
// //The above export is equal to the following:
// // import { name, sex } from './module1.js';
// // export { name, sex };
export {emp}
HTML
<script type="module">
//Import module7 and export module1 contents in module7
import {name,sex,emp} from "./export/module7.js";
console.log(name);
console.log(emp.name);
</script>
(2) Compound writing method to realize interface renaming
module1.js
// export let name = "Monkey King";
// export let sex = "male";
//or
let name = "Sun WuKong";
let sex = "male";
export {name,sex};
module7.js
//Compound writing method to realize interface renaming
let emp = {name:"Zhu Bajie",sex:"male"};
export { name as myname, sex as mysex } from './module1.js';
export {emp}
HTML
<script type="module">
//Import renamed variables
// import {myname,mysex,emp} from "./export/module7.js";
// console.log(myname);
// console.log(emp.name);
</script>
(3) Convert to default interface
module1.js
// export let name = "Monkey King";
// export let sex = "male";
//or
let name = "Sun WuKong";
let sex = "male";
export {name,sex};
module7.js
// Convert to default interface
let emp = {name:"Zhu Bajie",sex:"male"};
export {name as default,sex} from './module1.js';
export {emp}
HTML
<script type="module">
//Import and modify the name of the default interface, and use abc to receive
import abc from "./export/module7.js";
import {sex,emp} from "./export/module7.js";
console.log(abc);
console.log(emp.name);
</script>
(4) Convert default interface to named interface
module6.js
function Add(...items)
{
let sum = 0;
for(let item of items)
{
sum += item;
}
return sum;
}
//Add here does not need {}
export default Add
module7.js
//Convert default interface to named interface
export {default as sum} from './module6.js';
HTML
<script type="module">
//Import the sum interface converted from the default interface
import {sum} from "./export/module7.js";
let result = sum(1,2,3,4,5);
console.log(result);
</script>
(5) Export all interfaces
module1.js
// export let name = "Monkey King";
// export let sex = "male";
//or
let name = "Sun WuKong";
let sex = "male";
export {name,sex};
module7.js
//Export all export * from './module1.js'
HTML
<script type="module">
//Receive all exported interfaces
import {name,sex} from "./export/module7.js";
console.log(name);
console.log(sex);
</script>