[TOC] #### 1. 模块的基本使用 --- 定义一个js模块 ```javascript let title = '辰风沐阳' let url = 'https://www.itqaq.com/index/art/279.html' function show() { console.log('this is show method') } export { title, url, show } ``` `type="module"` 表示使用模块化, `./module/1.js` 中的 `./` 不能省略 ```javascript <script type="module"> import { title, url, show } from "./module/1.js" console.log(title) console.log(url) show() </script> ``` #### 2. 模块延迟解析 --- 因为模块之间会有依赖关系,所以系统在处理模块时会加载全部模块后才会执行模块 所以模块化js代码放在 button 标签之前,也能找到 button 标签 ```javascript <script type="module"> console.log(document.querySelector('button')) </script> <button>测试</button> ``` #### 3. 作用域在模块中的体现 --- 模块有自己的独立作用域,在模块中定义的变量只能在模块内部使用 在模块内部可以使用全局作用域的变量,但在外部则不能使用模块内部的变量,只有使用 `export` 导出才能在外部使用 #### 4. 模块的预解析 --- 无论模块加载多少次,只会在第一次时产生执行 #### 5. 模块的具名导出和导入 --- 具名导出: 顾名思义,就是导出具有名称的成员 ```javascript let site = 'wwww.itqaq.com' function show() { console.log('this is show ') } export { site, show } ``` #### 6. 批量导入 `* as name` --- ``` // 导出的内容 export { site, url } // 导入 import * as api from './modules/http.js' console.log(api.url) console.log(api.site) ``` #### 7. `导出、导入` 别名的使用 --- ```javascript import { site as name } from './modules/user.js' ``` #### 8. 模块的默认导出 --- `export` 导出数据时使用 `default` 代表时默认导出,那么在导入模块时接收的名称可以任意定义 ```javascript export default function show() { console.log('this is show ') } import api from './modules/show.js' ``` 默认导出本质上是给导出的成员设置了别名 `default`,这也是默认导出只能写一个的原因 ``` export { show as default } ``` 接收默认导出的成员,下面两种写法都可以 ``` import user from './modules/show.js'; import { default as user } from './modules/show.js'; ``` 具名导出和默认导出的混合使用及其导入 ```javascript // 导出 export const domain = 'https://www.itqaq.com'; export default function request() { return new Promise((resolve, reject) => { }); } // 导入 import request, { domain as url } from './modules/request.js'; ``` #### 9. 模块的合并导出 --- 创建一个模块(merge.js)进行合并导出 ```javascript import * as user from './modules/user.js'; import * as admin from './modules/admin.js'; export { user, admin } ``` 导入合并后的模块 ```javascript import * as api from './modules/merge.js'; // 访问方式 // api.user.成员 // api.admin.成员 ``` #### 视频推荐 --- [后盾人向军: JS模块化开发,编写高可用代码](https://www.bilibili.com/video/BV1jJ411r7nb?spm_id_from=333.999.0.0 "后盾人向军: JS模块化开发,编写高可用代码")