ES模块化的导入导出（所有方法都要求掌握）

ES模块化的导入导出

首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module

<script src="aaa.js" type="module"></script>
<script src="bbb.js" type="module"></script>
<script src="mmm.js" type="module"></script>

export基本使用：

export指令用于导出变量

1.导出方式一：

export {
    flag,
    sum,

}

2.导出方式二：

export var num1=1000;
export var height=1.88;

在某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名，这个时候就可以使用export default
需要注意：
export default在同一个模块中，不允许同时存在多个，只能有一个

import指令用于导入变量：

import {flag,sum} from "./aaa.js";

如果希望某个模块中所有的信息都导入，一个个导入显然有些麻烦
通过 * 可以导入模块中所有的export变量
但是通常情况下我们需要给 * 起一个别名，方便后续的使用

导出的方式集合：

var name='小明';
var age=18;
var flag=true;

function sum(num1,num2) {
  return num1 + num2;
}

if(flag){
  console.log(sum(20,30))
}
//1.导出方式一：
export {
    flag,
    sum,

}

//2.导出方式二：
export var num1=1000;
export var height=1.88;

//3.导出函数/类
export function mul(num1,num2) {
  return num1 + num2;
}

export class Person{
  run(){
    console.log('早航海')
  }
}

//4.export default
const address='北京市';
export default address

导出的方式集合：

//1.导入的{}中定义的变量
import {flag,sum} from "./aaa.js";

if(flag){
  console.log('小明是天才');
  console.log(sum(20,30))
}
//2.直接导入export定义的变量
import {num1,height} from "./aaa.js";

console.log(num1)
console.log(height)

//3.导入export的function、class
import {mul,Person} from "./aaa.js";

console.log(mul(10,1))

const p=new Person();
p.run();

//4.导入export default中的内容
import addr from "./aaa.js"

console.log(addr)

//5.统一全部导入
import * as aaa from "./aaa.js"
console.log(aaa.flag)
console.log(aaa.height)