概述：

将一个大的程序文件，拆分成许多小的文件，然后将小的文件组合起来

模块化的好处：

1.防止命名冲突
2.代码复用（类似于函数封装）
3.高维护性

在es6之前是靠社区的模块化规范产品（比如CommonJS）。

es6模块化语法：

模块功能主要由两个命令构成：export和import
export用于规定模块的对外接口
import命令用于输入其它模块提供的命令

分别暴露基本使用方法：

创建一个js文件，然后在里面需要向外暴露的变量或者函数，或者对象的最前面输入export 空格
image.png
在页面中需要引入的地方：输入script标签，将标签的格式type设置为module，然后在里面输入import*as 模块名 from ‘输入模块地址’；
image.png

统一暴露使用方法：

创建一个js文件，在里面写好变量和函数，然后在最下方，使用export{变量名，函数名}
image.png
在页面中需要引入的地方：输入script标签，将标签的格式type设置为module，然后在里面输入import*as 模块名 from ‘输入模块地址’；

默认暴露使用方法：

新建一个js文件，然后输入export default{}//暴露类型可以是任意类型
image.png
在页面中需要引入的地方：输入script标签，将标签的格式type设置为module，然后在里面输入import*as 模块名 from ‘输入模块地址’；
注意：对于这样的结构如果我们想要使用里面的属性和方法时，需要多加一层default比如
image.png

在es6中如何引入模块：

1.通用的导入方式：
无论是上述的那种暴露方式，都可以使用import*as 模块名 from ‘模块地址’的方式。
2.解构赋值形式：
创建js文件，在里面将想要暴露的变量和函数，暴露出来：
image.png
在页面中需要引入的地方：输入script标签，将标签的格式type设置为module，然后使用Import{变量名，函数名} from ‘模块地址’
image.png
如果在同一个script标签中引入的两个模块，然后使用解构赋值形式的时候出现，两个模块中有重名的时候。
image.png
image.png
import{school,teach} from ‘m1地址’
import{school,findJob} from ‘m2地址’
我们再使用结构赋值的形式，就会出现问题,我们可以使用as在{}里面进行修改对应的名字的方法。
image.png