ES模块化的导入和导出

我们定义两个文件aaa.js和bbb.js。
aaa.js:

let name="Tom";
let age=20;
console.log("name:"+name+" age:"+age+" in aaa.js")

bbb.js:

let name="Jack";
let age=22;
console.log("name:"+name+" age:"+age+" in bbb.js")

然后我们在html里面引入这两个js文件。

    <script src="aaa.js"></script>
    <script src="bbb.js"></script>

很显然，浏览器会直接报错，觉得你重复定义变量。

这时候，只需要在引入js的时候添加type属性，并且设置类型为module就可以解决变量重复的问题了。
浏览器认为你是两个模块的变量，是互相独立的。这就是ES6提供的模块化支持。

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

这时候我们写一个ccc.js。并且在html中引入。

console.log("name:"+name)
console.log("age:"+age)
console.log(sum(1,2))

aaa.js添加了sum方法

let name="Tom";
let age=20;
function sum(a,b) {
    return a+b
}
console.log("name:"+name+" age:"+age+" in aaa.js")

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

这里age报错了，说age没有定义。因为都设置type为module，别的js文件定义的内容就不能访问到了。所以报未定义。
但这里还有一个问题，name应该也访问不到，为什么没有先报错？这是因为window对象也有一个变量叫name，直接引用window的name属性了。所以变量最好不要取name这个名字。

那么我又想用这么办呢？这时候就需要导出给别的文件用。
只需要使用export关键字把需要暴露的变量或者方法导出提供给别的js使用就行了。

let name="Tom";
let age=20;
function sum(a,b) {
    return a+b
}
console.log("name:"+name+" age:"+age+" in aaa.js")

export {
    sum,name,age
}

别的js文件在使用导出的变量的时候要先导入，这样就同时解决了命名冲突和不能引用别的模块内容的问题。

import {age} from "./aaa.js";
import {name} from "./aaa.js";
import {sum} from "./aaa.js";
console.log("name:"+name)
console.log("age:"+age)
console.log(sum(1,2))

导出的多种方式

1.导出为对象。
一个个导出，比较麻烦。

export {
    sum,name,age
}

2.导出单个变量
这种好处是可以在定义好的变量前加一个export关键字就可以了。

export var isChange=true

3.导出方法

export function foo(a) {
    console.log(a)
}

4.导出类

export class Person{
   constructor(name,age) {
      this.name=name
       this.age=age
   }

   run(){
       console.log(this.name+"在奔跑")
   }

}

5.通配符导入
前面都是导出，这里讲一个导入，其实是导出的一个补充。
定义的导出可能有很多，一个个导入不太方便，可以使用 3

import * as data from "./aaa.js"
console.log(data.name);