模块化继续

直接导出

 

```javascript

export let name = '小明'

```

 

> 使用

 

```javascript

import {name} from './aaa.js'

console.log(name)

```

 

`./aaa.js`表示aaa.js和mmm.js在同级目录。

 

如图打印结果。

 


###   统一导出

 

```javascript

var age = 22

function sum(num1, num2) {

  return num1 + num2

}

var flag = true

if (flag) {

  console.log(sum(10, 20))

}

//2.最后统一导出

export {

  flag,sum,age

}

```

 

> 使用`import {name,flag,sum} from './aaa.js'`导入多个变量

 

```javascript

import {name,flag,sum} from './aaa.js'

 

console.log(name)

 

if(flag){

  console.log("小明是天才");

}

 

console.log(sum(20,30));

```

 

> 使用{}将需要的变量放置进去

 


###   导出函数/类

 

> 在aaa.js中添加

 

```javascript

//3.导出函数/类

export function say(value) {

  console.log(value);

}

export class Person{

  run(){

    console.log("奔跑");

  }

}

```

 

> 在mmm.js中添加

 

```javascript

import {name,flag,sum,say,Person} from './aaa.js'

 

console.log(name)

 

if(flag){

  console.log("小明是天才");

}

 

console.log(sum(20,30));

 

say('hello')

const p = new Person();

p.run();

```

 

 

###   默认导入 export default

 

> 导出

 

```javascript

export default {

  flag,sum,age

}

```

 

> 导入

 

```javascript

//4.默认导入 export default

import aaa from './aaa.js'

console.log(aaa.sum(10,110));

```

 

> 注意：使用默认导出会将所有需要导出的变量打包成一个对象，此时导出一个对象，此时我在`mmm.js`中导入变量时候命名为aaa，如果要调用变量需要使用aaa.变量。

 

###  统一全部导入

 

> ​ 使用`import * as aaa from './aaa.js'`统一全部导入

 

```javascript

// 5.统一全部导入

import * as aaa from './aaa.js'

console.log(aaa.flag);

console.log(aaa.name);

```