Vue模块化 ｜ 青训营笔记

---

theme: condensed-night-purple

highlight: a11y-dark

这是我参与「第四届青训营 」笔记创作活动的的第7天

为什么要有模块化

• 解决命名冲突问题

• 解决代码复用问题

  匿名函数的解决方案

  可以使用匿名函数来解决命名冲突问题

匿名函数解决了命名冲突，但是不能代码复用

使用模块作为出口

ES5：使用模块作为出口

• 在匿名函数内部，定义一个对象。
• 给对象添加各种需要暴露到外面的属性和方法 (不需要暴露的直接定义即可)。
• 最后将这个对象返回，并且在外面使用了一个 MoudleA 接受。

在main.js中，只需要使用属于自己模块的属性和方法即可

常见的模块化规范: CommonJS、AMD、CMD，也有ES6的Modules

CommonJS

node就是用的CommonJS规范 模块化有两个核心：导出和导入 ``` md5-98bc67eb11a180817de98a7b6d5a71f2 ```

ES6 的 Modules 模块化

export指令用于导出变量

import指令用于导入模块中的内容 ```

```

通过import命令来加载对应的这个模块

首先，我们需要在HTML代码中引入两个js文件，并且类型需要设置为module (加上就不会有命名冲突)

<script src="./info.js" type="module"></script>

<script src="./main.js" type="module"></script>

光写这个，没有export 时，每个模块不能使用其他模块的东西，就像是3个函数不能互相访问他们里面的变量 想用的话就要使用export 导出

模块作用域： - 在自己的文件-独立空间内可以随意起名，不用担心和其他模块命名冲突， - 但其他模块不能访问该模块的东西 - 通过 export 导出变量，import 导入变量 让别人访问到

import指令用于导入模块中的内容，比如main.js的代码 import {name,test,Person} from '/./info.js'

统一全部导入

如果我们希望某个模块中所有的信息都导入，一个个导入显然有些麻烦： 通过*可以导入模块中所有的export变量 但是通常情况下我们需要给 *起一个 别名，方便后续的使用 ```

```

export default

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

```html

```

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