模块化开发
2020-12-22 本文已影响0人
c_gentle
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
