ES6 模块化实现-导入导出

es6模块化实现

核心：导入 导出
首先，在HTML代码中引入两个js文件，而且类型type需要设置为module

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

import指令用于导入模块中的内容 比如 aam.js 导入 aaa.js里面的内容

//导入方式一
import {flag , sum} from "./aaa.js";

if(flag){
    console.log(sum(20,20))
}

//导入方式二  直接导入export定义的变量
import {num1,height} from "./aaa.js";
console.log(num1,height);

//导入方式三 ， 导入函数
import {mul ,Person} from "./aaa.js";
console.log(mul(10,2));
const p = new Person();
p.run();

//导入方式四  没有大括号
import addr from "./aaa.js";
console.log(addr);

导出 用export

var name = '小明';
var age = 18;
var flag = true;

 function sum(num1,num2){
    return num1 + num2;
}

if(flag){
    console.log(sum(20,10));
}

//1.导出方式一
export {
    flag,sum
}

//2.导出方式二 
export var num1 = 1000;
export var height = 0.2;

//3.导出函数/类
export function mul(num1,num2){
    return num1*num2;
}

export class Person{
    run(){
        console.log('跑起来')
    }
}

//4.export default  只能有一个  某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名
const address = '冰岛'
export default address

如果导入内容很多

//如果统一全部导入 
//aaa是起的一个别名
import *as aaa from "./aaa.js";
console.log(aaa.flag)