ES6模块化代码图解

export(导出) / import（导入）

每个.js文件就是一个一个的模块，script标签绑定type="module"后，每个模块都会相互独立开来，互不影响。我们可以看作每个.js文件都是一个独立的房间（自己的作用域），不允许不相干的人进来（不允许别人访问）

整个代码导出和导入使用流程（方式一）。

testB输出的是500，没截到图

导出方式二

总结

导出写法：

const name = 'qfb'
const age = 21
const flag = true
function sum(num1, num2) {
    return num1 + num2
}
if (flag) {//flag是一个变量
    console.log(sum(10, 2))
}

//1.导出方式一：
export {
//把flag变量和sum函数导出去
    flag, sum
}

//2.导出方式二：
export let num1 = 1000;
export let height = 1.70

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

export class Person {
    run () {
        console.log('在跑路')
    }
}

//4.export default（默认导出功能，
//导入者自己命名，export default在同一个模块中仅有1个）
//const address = "深圳市"
// export { address }

// export const address1 = "深圳市"
// //上面的导入的时候要命名

//const address = "深圳市"
//export default address

//5.默认导出函数
export default function(argument) {
    console.log(argument)
}

导入写法：