JS ES6 模块化开发入门

1. 模块的基本使用
2. 模块延迟解析
3. 作用域在模块中的体现
4. 模块的预解析
5. 模块的具名导出和导入
6. 批量导入 * as name
7. 导出、导入 别名的使用
8. 模块的默认导出
9. 模块的合并导出
视频推荐

1. 模块的基本使用

---

定义一个js模块

1. let title = '辰风沐阳'
2. let url = 'https://www.itqaq.com/index/art/279.html'
4. function show() {
5. console.log('this is show method')
6. }
8. export { title, url, show }

type="module" 表示使用模块化, ./module/1.js 中的 ./ 不能省略

1. <script type="module">
2. import { title, url, show } from "./module/1.js"
3. console.log(title)
4. console.log(url)
5. show()
6. </script>

2. 模块延迟解析

---

因为模块之间会有依赖关系，所以系统在处理模块时会加载全部模块后才会执行模块

所以模块化js代码放在 button 标签之前，也能找到 button 标签

1. <script type="module">
2. console.log(document.querySelector('button'))
3. </script>
5. <button>测试</button>

3. 作用域在模块中的体现

---

模块有自己的独立作用域，在模块中定义的变量只能在模块内部使用

在模块内部可以使用全局作用域的变量，但在外部则不能使用模块内部的变量，只有使用 export 导出才能在外部使用

4. 模块的预解析

---

无论模块加载多少次，只会在第一次时产生执行

5. 模块的具名导出和导入

---

具名导出: 顾名思义，就是导出具有名称的成员

1. let site = 'wwww.itqaq.com'
3. function show() {
4. console.log('this is show ')
5. }
7. export { site, show }

6. 批量导入 * as name

---

1. // 导出的内容
2. export { site, url }
4. // 导入
5. import * as api from './modules/http.js'
6. console.log(api.url)
7. console.log(api.site)

7. 导出、导入 别名的使用

---

1. import { site as name } from './modules/user.js'

8. 模块的默认导出

---

export 导出数据时使用 default 代表时默认导出，那么在导入模块时接收的名称可以任意定义

1. export default function show() {
2. console.log('this is show ')
3. }
5. import api from './modules/show.js'

默认导出本质上是给导出的成员设置了别名 default，这也是默认导出只能写一个的原因

1. export { show as default }

接收默认导出的成员，下面两种写法都可以

1. import user from './modules/show.js';
2. import { default as user } from './modules/show.js';

具名导出和默认导出的混合使用及其导入

1. // 导出
2. export const domain = 'https://www.itqaq.com';
3. export default function request() {
4. return new Promise((resolve, reject) => { });
5. }
6. // 导入
7. import request, { domain as url } from './modules/request.js';

9. 模块的合并导出

---

创建一个模块（merge.js）进行合并导出

1. import * as user from './modules/user.js';
2. import * as admin from './modules/admin.js';
3. export { user, admin }

导入合并后的模块

1. import * as api from './modules/merge.js';
3. // 访问方式
4. // api.user.成员
5. // api.admin.成员

视频推荐

---

后盾人向军: JS模块化开发，编写高可用代码