In previous javascript, there was no concept of modularity. If you want to perform modular operations, you need to introduce third-party classes
Library. With the development of technology and the separation of front-end and back-end, the front-end business becomes more and more complex. It was not until ES6 brought modularity
javascript supports module for the first time. The modularization of ES6 is divided into two modules: export and import.

Usage of export:

In ES6, each module is a file. Variables, functions and objects defined in the file cannot be obtained externally. If
If you want the content in the module to be read externally, you must use export to expose (output) it. Let's take an example first
To modularize a variable. Let's create a test JS file to output this variable:

export let myName="laowang";

You can then create an index JS file to import this variable:

import {myName} from "./test.js";
console.log(myName);//laowang

⭐ If you want to output multiple variables, you can wrap these variables into objects for modular output:

{
let myName="laowang";
let myAge=90;
let myfn=function(){
return "I am"+myName+"!this year"+myAge+"Years old" }
export {
myName,
myAge,
myfn
}

The received code is adjusted to:

import {myfn,myAge,myName} from "./test.js";
console.log(myfn()); //I'm laowang! I'm 90 years old
console.log(myAge); //90
console.log(myName); //laowang

⭐ If you don't want to expose the variable names in the module, you can operate through as:

{
let myName="laowang";
let myAge=90;
let myfn=function(){
return "I am"+myName+"!this year"+myAge+"Years old" }
export {
myName as name,
myAge as age,
myfn as fn
}

The received code is adjusted to:

import {fn,age,name} from "./test.js";
console.log(fn()); //I'm laowang! I'm 90 years old
console.log(age); //90
console.log(name); //laowang

⭐ You can also directly import the whole module and modify the above receiving code to:

import * as info from "./test.js"; //Receive in batches through * [wildcard], and specify the name of the received as
console.log(info.fn()); //I'm laowang! I'm 90 years old
console.log(info.age); //90
console.log(info.name); //laowang

⭐ default export
A module can only have one default export. For default export, the imported name can be inconsistent with the exported name.

• export

export default function(){
return "Export a method by default" }

• introduce

import myFn from "./test.js"; //Note that {} is not required for default export here.
console.log(myFn()); //Export a method by default

⭐ You can put all the variables to be exported into one object and export them through default export

• export

export default {
myFn(){
return "Export a method by default"
},
myName:"laowang"
}

• introduce

import myObj from "./test.js";
console.log(myObj.myFn(),myObj.myName);//The default export method is laowang

⭐ Mixed export is also supported

• export

export default function(){
return "Export a method by default" }
export var myName="laowang";

• introduce

import myFn,{myName} from "./test.js";
console.log(myFn(),myName); //The default export method is laowang

⭐ Rename export and import
If the variable names in multiple imported files are the same, there will be a naming conflict. In order to solve this problem, ES6 provides
The renaming method is. You can do this when importing names:

• test1.js

export let myName="I come from test1.js";

• test2.js

export let myName="I come from test2.js"

• index.js

import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1);//I'm from test1 js
console.log(name2);//I'm from test1 js