定义

一个模块实际上就是一个.js文件，使用关键字import导入

定义一个a.js文件，代码如下

const a = 1;
console.log('a = ' + a);

在HTML中引入文件

<script type="module">
  import "./a.js";
  //输出a=1
</script>

注意:

1. import可以是相对路径，也可以是绝对路径
2. import模块只会导入一次，无论引入多少次
3. import ‘./a.js’; 相对于引入一个文件
4. import只能写在type=”model”的script标签中

使用

提前执行

先执行import中的代码，然后再执行其他代码

const a = 1;
console.log('a = ' + a);

<script type="module">
  console.log("Hello");
  import "./a.js";
  //先输出a=1，Hello
</script>

单个导出

一个一个对象导出

console.log('Hello module import');
export const a=12;
export const b=5;
export let c=100;

<script type="module">
  import {a,b,c} "./a.js";
  console.log(a, b,c);
</script>

别名导出

定义导出对象的名称

console.log('Hello module import');
const a=12;
const b=5;
let c=100;
export {
    a as aName,
  b as bName,
  c as cName
}

<script type="module">
  import {aName , bName , cName} "./a.js";
  console.log(aName , bName , cName);
</script>

全部导出

将所有导出内容集成到一个对象中

<script type="module">
  import * as modObj "./a.js";
  console.log(modObj);
</script>

导出default

console.log('Hello module import');
export default "Hello World";

<script type="module">
  import a modObj "./a.js";
  console.log(a); //Hello World
</script>

混合导出

既有export default，也有export 导出

export default "Hello World";
export const name = "Ken";
export const age = 12;

<script type="module">
  import a,{ name , age } modObj "./a.js";
  console.log(a); //Hello World
  console.log(name , age); //Ken 12
</script>

import()语法

import()语法用于动态引入，这是一个异步操作，返回一个promise对象

import('./a.js').then(function(res) {
    console.log(res);
});

结合Promise.all，同时引入多个js模块

Promise.all([import('./a.js'),import('./b.js')].then(function(res) {
    console.log(res);
});