ES模块化的导入和导出

• 文章来源于原创博主：https://blog.csdn.net/jwz934738949/article/details/107430622

1.export导出

在使用导入与导出时，需要在引用js文件时添加type属性，type值为module

<script src="test1.js" type="module"></script>
<script src="test2.js" type="module"></script>

1. 导出对象：使用export {} 来导出对象，大括号中填写要导出的变量名称

var flag = true;
function sum(num1, num2) {
  return num1 + num2;
}

export {flag, sum}

1. 导出变量：使用export加上变量，直接导出变量

export var message = '导出变量';
export var num = 10;

1. 导出函数/类

export function mul(num1, num2) {
  return num1 * num2;
}

export class Person {
  show() {
    console.log('类Person被导入');
  }
}

1. export default：只能导出一个，可以是对象、函数、类、变量等，但是只能导出一个

export default function () {
  console.log('export default导入成功');
}

2.import导入

1. 导入对象：与导出对象对应，将导出的对象导入到文件中来

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

if (flag) {
  console.log("从test1.js导入成功");
  console.log(sum(25, 30));
}

1. 导入变量

import {message, num} from "./test1.js";

console.log(message, num);

1. 导入函数/类

import {mul, Person} from "./test1.js";

console.log(mul(10, 30));
const per = new Person();
per.show();

1. 导入export default：在进行export defalut时，只能接受一个导出变量，并且在导入时允许自定义变量名称

import d from './test1.js';

d();

1. 统一全部导入：使用*将所有的变量导入，通过as来起别名，使用别名.变量名来调用导入的变量

import * as arg from './test1.js';

console.log(arg.mul(30, 40));
console.log(arg.flag);