一、为什么要使用模块化的导入和导出？
假如我们在开发项目时，会写很多个js文件，我们需要把这些js文件引用到一个html文件中去，但此时这些文件是没有联系的。如果我们需要在一个js文件中引用另一个js文件的变量或者函数等，就需要使用模块化的导入和导出。总的来说，就是跨域调用。
<body>
<!--这里使用type="module"就可以把他们分成独立模块
，即使这些js文件里有相同名的变量也不会相互影响-->
<script src="one.js" type="module"></script>
<script src="two.js" type="module"></script>
<script src="three.js" type="module"></script>
</body>
二、导出—export的使用
（1）导出变量
//这里是one.js
//导出方式1：先定义变量再导出
var name="小花"
var age="31"
var flag = true
export{
name,flag
}
//导出方式2：导出的时候定义变量
export var name = "大喜";
export var age = "30"
（2）导出函数或类
//这里是one.js
function sum(num1,num2){
return num1+num2
}
class person1 constructor(name,age){
this.name = name;
this.age= age;
}
//方法一：使用名直接导出
export {
sum,person1}
//方法二：边导出边定义
export function mul(num1,num2){
return num1*num2
}
export class person {
//定义一个类
height(){
consolo.log("162cm");
}
}
（3）export default 导出
一般来说，我们导出的是什么名字，别人导入使用的就是什么名字。
但某些情况下，一个模块中包含某个功能，我们要让导入者自己来命名，这个时候就可以使用export default了。
注意：export default在同一个模块中，只能有一个
//这里是one.js
const fruit = "西瓜"
export default fruit
//定义一个函数，并导出
export default function(aaa){
consolo.log(aaa);
}
三、导入—import的使用
（1）导入变量
//这里是two.js
//导入one.js的name和flag
import {
name,flag} from "./one.js";
（2）导入函数或类
//这里是two.js
//导入one.js中的mul函数和person类
import {
mul,person} from "./one.js"
//使用他们
consolo.log(mul(2,3));
const p=new person(); //使用类
p.height()
（3）export default导入
注意：export default在同一个模块中，只能有一个
//这里是two.js
//这里的shuiguo就是导入者自己命名的
//这个shuiguo只会去寻找export default定义的那个东西
import shuiguo from "./one.js";
consolo.log(shuiguo);
//导入定义的aaa函数并使用
import shuiguo from "./one.js";
shuiguo("苹果")；
（4）通过*导入
如果想要摸个模块中所有的信息都导入，一个个导入就显的有点麻烦。
- 通过*可以导入模块中所有的export变量
- 通常情况下还的给*起一个别名，方便后续使用
import * as one1 from "./one.js"
consolo.log(one.name,one.age,one.sum);//使用one.js里面的一些变量或者函数