当前位置：网站首页>ES6 module

ES6 module

2022-06-26 13:19:00 【HaanLen】

summary

stay ES6 front , Modularity is achieved using RequireJS perhaps seaJS（ The difference is based on AMD Standardized modular Library , And based on CMD Standardized modular Library ）.
ES6 The introduction of modularity , Its design idea is to be able to determine the dependency of modules at compile time , And the input and output variables .
ES6 The modularization of is divided into export （export） @ And import （import） Two modules .

characteristic

ES6 The module automatically turns on strict mode , Whether or not you add use strict;.
Various types of variables can be imported and exported in the module , Such as function , object , character string , Numbers , Boolean value , Class etc. .
Each module has its own context , The variables declared in each module are local variables , Does not contaminate the global scope .
Each module is loaded only once （ Is a singleton ）, If you load the same file in the same directory , Read directly from memory .

export And import

Basic usage

The exported function declaration and class declaration must have a name （export default Order another consideration ）.
You can export not only declarations, but also references （ For example, functions ）.
export Commands can appear anywhere in the module , But it must be at the top of the module .
import The command will be raised to the head of the whole module , First, execute .

modularization ： How to define modularity ; How to use modules
Be careful ： It needs to be put into the server environment .

Take a simple chestnut
html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> </style> 
</head>
<body>
<script type="module"> import './module/tt.js' </script>
</body>
</html>

console.log('1 Module loaded ');
export const a=12;

Insert picture description here

import Can be a relative path 、 It could be an absolute path .
import The module will only import once , No matter how many times you import .
import Export to module content , If there is a timer change , There will be changes outside .

Chestnut display
html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> </style> 
</head>
<body>
<script type="module"> import {
      a,b,c} from './module/tt.js'; console.log(a,b,c); </script>
</body>
</html>

console.log('1 Module loaded ');
export const a=12;
export const b=11;
export const c=3;

Insert picture description here

Chestnut display

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> </style> 
</head>
<body>
<script type="module"> import {
      a,b,c} from './module/tt1.js'; console.log(a,b,c); </script>
</body>
</html>

 const a=12;
 const b=11;
 const c=3;
export{
    
 a,
 b,
 c
}

Insert picture description here

Alias - Chestnut display

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> </style> 
</head>
<body>
<script type="module"> import {
      aaa,bbb,ccc} from './module/tt1.js'; console.log(aaa,bbb,ccc); </script>
</body>
</html>

 const a=12;
 const b=11;
 const c=3;
export{
    
 a as aaa,
 b as bbb,
 c as ccc
}

Insert picture description here

Chestnut display
html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> </style> 
</head>
<body>
<script type="module"> import {
      aaa as a,bbb as b,ccc as c} from './module/tt1.js'; console.log(a,b,c); </script>
</body>
</html>

 const a=121;
 const b=11;
 const c=34;
export{
    
 a as aaa,
 b as bbb,
 c as ccc
}

Insert picture description here

Chestnut display

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> </style> 
</head>
<body>
<script type="module"> import * as mod from './module/tt1.js'; console.log(mod); </script>
</body>
</html>

 const a=121;
 const b=11;
 const c=34;
export{
    
 a as aaa,
 b as bbb,
 c as ccc
}

Insert picture description here

console.log(mod.aaa);//121

Chestnut display -export defaulr xxx

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> </style> 
</head>
<body>
<script type="module"> import a from './module/tt2.js'; console.log(a);//12 </script>
</body>
</html>

export default 12;

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> </style> 
</head>
<body>
<script type="module"> import mod,{
      show,sum,a,b} from './module/tt2.js'; let p1=new mod.Person('ddd',18); console.log(p1.showName()); console.log(p1.showAge()); show(); sum(); console.log(a,b); </script>
</body>
</html>

const a=12;
const b=21;
const sum=()=>{
    
 console.log(a+b);
 return a+b;
}
const show=()=>{
    
 console.log(" Yes show");
 return 1;
}
class Person{
    
 constructor(name,age){
    
  this.name=name;
  this.age=age;
 }
 showName(){
    
  return ` The name is ：${
      this.name}`;
 }
 showAge(){
    
  return ` Age is ： ${
      this.age}`;
 }
}
export{
    
 a,
 b,
 show,
 sum
}
export default {
    Person};

Insert picture description here

Example
ff.js

export const a=12;
export const b=21;

import {
    a,b} from './ff.js'
const sum=()=>{
    
 console.log(a+b);
 return a+b;
}
const show=()=>{
    
 console.log(" Yes show");
 return 1;
}
class Person{
    
 constructor(name,age){
    
  this.name=name;
  this.age=age;
 }
 showName(){
    
  return ` The name is ：${
      this.name}`;
 }
 showAge(){
    
  return ` Age is ： ${
      this.age}`;
 }
}
export{
    
 a,
 b,
 show,
 sum
}
export default {
    Person};

Examples show
html

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css"> 
 </style> 
</head>
<body>
<script type="module">
  import {
    a,b} from './module/ff.js';
  console.log(a);
  setTimeout(()=>{
    
   console.log(a);
  },3000);
 </script>
</body>
</html>

export let a=12;
export let b=5;
setTimeout(()=>{
    
 a=123;
},2000);

Insert picture description here

import You can also dynamically load modules

Example

<script type="module">
 import('./module/ff.js').then(res=>{
    
  console.log(res.a*res.b);//60
 });
</script>

export let a=12;
export let b=5;

Promise.all()

<script type="module">
 Promise.all({
    
  import('./module/1.js');
  import('./module/2.js');
 }).then(([mod1,mod2])=>{
    
  console.log(mod1);
  console.log(mod2);
 })
</script>

async

 async function fn(){
    
  const mod1=await import('./module/1.js');
  const mod1=await import('./module/2.js');
  console.log(mod1,mod2);
  const [m1,m2]=await Promise.all([
   import('./module/tt.js');
   import('./module/ff.js');
   ]);
  console.log(m1,m2);
 }
 fn();