ES6模块化的导入和导出

ES6模块化的导入和导出

export使用

export default

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名就可以使用export default

注意：export default 在同一个模块中，不允许同时存在多个。

aaa.js

var name = "小明"
var age = 18
var flag = true
function sum(num1,num2){
    return num1 + num2
}
if(flag){
    console.log(sum(10,20));
}
//导出方式一
export {
    flag,sum
}
//导出方式二
export var name1 = 1000
export var height = 1.88
//导出函数或类
export function mel(num1,num2){
    return num1 * num2
}
export class Person{
    run(){
        console.log('在奔跑');
    }
}
//默认导出
const address = "武汉市"
export default address

import使用

使用export指令导出了模块对外提供的接口，我们就可以通过import命令来加载对应的这个模块

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

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

import指令用于导入模块的内容，比如：

mmm.js

//1.导入的{}中定义的变量
import { flag,sum } from "./aaa.js";
if(flag){
    console.log(sum(20,30));
}
//导入默认导出的
import aaa from "./aaa.js";
console.log(aaa);

bbb.js

var name= "小红"
var flag = false
//2.直接导入export定义的变量
import { name1,height } from "./aaa.js"
console.log(name1,height);

//3.导入 export 的function/class
import { mel,Person } from "./aaa.js";
console.log(mel(10,2));

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

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：

​ 1.通过 *可以导入模块中所有的export变量

​ 2.但是通常情况下我们需要给*起一个别名，方便后续使用

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