模块化，能够有效的提高多人开发时的效率，同时避免出现全局变量命名重复等比较严重的问题。常见的模块化导入导出的规范有：CommonJS、AMD、CMD、ES6的modules规范，其中只有ES6的模块规范不需要底层支持就可以直接在浏览器中运行。这里使用ES6的规范进行模块化导入导出
先生成一个html文件，再生成三个(数量不限，这里用3个进行示范)js文件（man.js、we.js、woman.js），先对该JS文件进行引用，这里需要对引用的JS文件设置type属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- type="module" 即将整个引用的js文件视作一个封闭的模块 -->
<!-- 使用import导入的时候需要在html文件中将引入的JS文件将类型设置为module-->
<!-- 一个模块的内部的数据封闭的，一个模块就是一个作用域 -->
<script src="man.js" type="module"></script>
<script src="woman.js" type="module"></script>
<script src="we.js" type="module"></script>
</body>
</html>
我们不妨在man.js中设置一些变量和函数
let name = 'bovi';
let age = 19;
let flag = true;
function sum(num1,num2){
return num1+num2
}
再对woman.js 中设置一些变量和函数
let name ='Fbovi';
let age = 20;
let flag = false;
再在we.js中设置一个函数
if(flag){
console.log(12);
console.log(sum(20,200));
}
不难看出woman.js和man.js中存在命名相同的变量，但由于在引入的时候设置了type=’module’，将两个文件模块化，从而不会出现报错
此时我们想要在we.js使用man.js中的变量flag以及函数sum。首先需要对flag、sum进行导出
// 导出方式一：以对象的方式导出
export{
flag,sum
}
// 导出方式二：
export var flag = true;
// 导出方式三：导出类 /函数
export function sum(num1,num2){
return num1+num2;
}
在man.js文件中实现导出后，我们需要在we.js中进行导入,需要注意的是，我们在导入/使用导入的变量或函数时，必须使用他们的原名
//导入方式
import { flag，sum } from "./man";
// 统一全部导入 将一个模块中导出的全部属性、函数放入一个对象mess(名称可更改)
// import * as mess from './man.js'
// console.log(mess.flag)；
当然，如果想要让导出者对导入的变量、函数进行命名的话，我们在导出的时候需要使用export default
// export default（一个模块中只能有一个），可以导出属性或者函数
const address = '成都';
export default address;
export default function(message){
console.log(message);
}
// 导入 import aaaa from './man.js' 其中aaaa可以为任意字符名字,此时aaaa = '成都'
// 导入 import aaaa from './man.js' aaaa("你好呀"),将会实现在控制台输出 你好呀 ；其中aaaa可以为任意字符名字
