模块封装的几种操作
模块
定义： 模块是自动运行在严格模式下并且没有办法退出的JavaScript代码。
模块可以是函数、数据、类，需要指定导出的模块名，才能被其他模块访问。
<!--数据模块-->
const obj = { a: 1 }
<!--函数模块-->
const sum = (a, b) => {
return a + b;
}
<!--类模块-->
class My extends vue.Components{
}
模块导出
添加export 导出模块
<!--数据模块-->
export const obj = { a: 1 }
<!--函数模块-->
export const sum = (a, b) => {
return a + b;
}
<!--类模块-->
export class My extends vue.Components{
}
模块导入
使用import关键字，导入分两种情况，一种是导入指定的模块，另外一种是导入全部模块。
1）导入指定的模块
<!---->
import {obj, My} from 'XX.js'
console.log(obj, My);
2) 导入全部
<!---->
import * as all from 'XXX.js'
console.log(all.obj, all.sum(1, 2), all.My);
默认模块的使用
如果给我们的模块加上default关键字，那么该js文件默认只导出该模块，你还需要把大括号去掉。
<!--默认模块定义-->
function sum = (a, b) => {
return a + b;
}
export default sum
<!--导入默认模块-->
import sum from 'xx.js'
模块的使用限制
不能在语句和函数之内使用export关键字，只能在模块顶部使用
<script>
import sum from 'xx.js'
// fangfa
</script>
修改模块导入和导出名
function sum = (a, b) => {
return a + b;
}
1）导出时修改
export { sum as add }
import {add} from ''
2) 导入时修改
export sum
import { sum as add } from ''
无绑定导入
当你的模块没有可导出模块，全都是定义的全局变量的时候，你可以使用无绑定导入。
<!--模块-->
let a = 0;
const PI = 3.14;
<!--无绑定导入-->
import '';
console.log(a, PI);
浏览器加载模块
有用过webpack打包js模块的同学可能有经验，使用webpack打包了多个js文件，然后放到HTML使用script加载时，如果加载顺序不对，就会出现找不到模块的错误。
这是因为模块之间是有依赖关系的，就像你使用jQuery的时候，必须先加载jQuery的代码，才能使用jQuery提供的方法。
加载模块的方法，总是先加载模块1，再加载模块2，因为module类型默认使用defer属性。
<script type='module' src='module1.js'></script>
<script type='module' src='module2.js'></script>
本文参考掘金社区文章
