JS ES6 模块化开发入门

旧城等待， 2024-03-29 15:09 65阅读 0赞

![991645941368ec02226de166045e81cf.jpeg][]

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'`
3.  
4.  `function show() {`
5.  `console.log('this is show method')`
6.  `}`
7.  
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>`
4.  
5.  `<button>测试</button>`

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

--------------------

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

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

4. 模块的预解析

--------------------

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

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

--------------------

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

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

6. 批量导入 `* as name`

--------------------

1.  `// 导出的内容`
2.  `export { site, url }`
3.  
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.  `}`
4.  
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';`
2.  
3.  `// 访问方式`
4.  `// api.user.成员`
5.  `// api.admin.成员`

视频推荐

--------------------

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

[991645941368ec02226de166045e81cf.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/28/281e597deb204c93b36fb3633a3d1d5c.png
[JS]: https://www.bilibili.com/video/BV1jJ411r7nb?spm_id_from=333.999.0.0