模块化开发

1、export基本使用

export指令用于导出变量，比如下面的代码：

image.png

上面的代码还有另外一种写法：

image.png

2、导出函数或类

上面我们主要是输出变量，也可以输出函数或者输出类
上面的代码也可以写成这种形式：

image.png
image.png

3、export default

某些情况下，一个模块中包含某个的功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名
这个时候就可以使用export default

image.png

我们来到main.js中，这样使用就可以了
这里的myFunc是我自己命名的，你可以根据需要命名它对应的名字

image.png
另外，需要注意：
export default在同一个模块中，不允许同时存在多个。

4、import使用

我们使用export指令导出了模块对外提供的接口，下面我们就可以通过import命令来加载对应的这个模块了
首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module

image.png
import指令用于导入模块中的内容，比如main.js的代码
image.png
如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦：
通过可以导入模块中所有的export变量
但是通常情况下我们需要给起一个别名，方便后续的使用
image.png