当前位置：网站首页>ES6模块

ES6模块

2022-06-26 12:36:00 【HaanLen】

概述

在 ES6 前，实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库，和基于 CMD规范的模块化库）。
ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。
ES6 的模块化分为导出（export） @与导入（import）两个模块。

特点

ES6 的模块自动开启严格模式，不管你有没有在模块头部加上 use strict;。
模块中可以导入和导出各种类型的变量，如函数，对象，字符串，数字，布尔值，类等。
每个模块都有自己的上下文，每一个模块内声明的变量都是局部变量，不会污染全局作用域。
每一个模块只加载一次（是单例的），若再去加载同目录下同文件，直接从内存中读取。

export 与 import

基本用法

导出的函数声明与类声明必须要有名称（export default 命令另外考虑）。
不仅能导出声明还能导出引用（例如函数）。
export 命令可以出现在模块的任何位置，但必需处于模块顶层。
import 命令会提升到整个模块的头部，首先执行。

模块化：如何定义模块化；如何使用模块
注意：需要放到服务器环境。

举个简单栗子
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模块加载了');
export const a=12;

在这里插入图片描述

import可以是相对路径、也可以是绝对路径。
import模块只会导入一次,无论导入多少次。
import导出去模块内容，如果里面有定时器更改，外面也会改动。

栗子展示
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模块加载了');
export const a=12;
export const b=11;
export const c=3;

在这里插入图片描述

栗子展示

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
}

在这里插入图片描述

别名-栗子展示

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
}

在这里插入图片描述

栗子展示
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
}

在这里插入图片描述

栗子展示

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
}

在这里插入图片描述

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

栗子展示-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;

例子

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("执行了show");
 return 1;
}
class Person{
    
 constructor(name,age){
    
  this.name=name;
  this.age=age;
 }
 showName(){
    
  return `名字是：${
      this.name}`;
 }
 showAge(){
    
  return `年龄是： ${
      this.age}`;
 }
}
export{
    
 a,
 b,
 show,
 sum
}
export default {
    Person};

在这里插入图片描述

例子
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("执行了show");
 return 1;
}
class Person{
    
 constructor(name,age){
    
  this.name=name;
  this.age=age;
 }
 showName(){
    
  return `名字是：${
      this.name}`;
 }
 showAge(){
    
  return `年龄是： ${
      this.age}`;
 }
}
export{
    
 a,
 b,
 show,
 sum
}
export default {
    Person};

例子展示
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);

在这里插入图片描述

import也可以动态加载模块

例子

<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();