[TOC] #### 1. 模塊的基本使用 --- 定義一個js模塊 ```javascript let title = '辰風(fēng)沐陽' let url = 'http://m.waterflosserreview.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. 模塊延遲解析 --- 因?yàn)槟K之間會有依賴關(guān)系，所以系統(tǒng)在處理模塊時會加載全部模塊后才會執(zhí)行模塊 所以模塊化js代碼放在 button 標(biāo)簽之前，也能找到 button 標(biāo)簽 ```javascript <script type="module"> console.log(document.querySelector('button')) </script> <button>測試</button> ``` #### 3. 作用域在模塊中的體現(xiàn) --- 模塊有自己的獨(dú)立作用域，在模塊中定義的變量只能在模塊內(nèi)部使用 在模塊內(nèi)部可以使用全局作用域的變量，但在外部則不能使用模塊內(nèi)部的變量，只有使用 `export` 導(dǎo)出才能在外部使用 #### 4. 模塊的預(yù)解析 --- 無論模塊加載多少次，只會在第一次時產(chǎn)生執(zhí)行 #### 5. 模塊的具名導(dǎo)出和導(dǎo)入 --- 具名導(dǎo)出: 顧名思義，就是導(dǎo)出具有名稱的成員 ```javascript let site = 'wm.waterflosserreview.com' function show() { console.log('this is show ') } export { site, show } ``` #### 6. 批量導(dǎo)入 `* as name` --- ``` // 導(dǎo)出的內(nèi)容 export { site, url } // 導(dǎo)入 import * as api from './modules/http.js' console.log(api.url) console.log(api.site) ``` #### 7. `導(dǎo)出、導(dǎo)入` 別名的使用 --- ```javascript import { site as name } from './modules/user.js' ``` #### 8. 模塊的默認(rèn)導(dǎo)出 --- `export` 導(dǎo)出數(shù)據(jù)時使用 `default` 代表時默認(rèn)導(dǎo)出，那么在導(dǎo)入模塊時接收的名稱可以任意定義 ```javascript export default function show() { console.log('this is show ') } import api from './modules/show.js' ``` 默認(rèn)導(dǎo)出本質(zhì)上是給導(dǎo)出的成員設(shè)置了別名 `default`，這也是默認(rèn)導(dǎo)出只能寫一個的原因 ``` export { show as default } ``` 接收默認(rèn)導(dǎo)出的成員，下面兩種寫法都可以 ``` import user from './modules/show.js'; import { default as user } from './modules/show.js'; ``` 具名導(dǎo)出和默認(rèn)導(dǎo)出的混合使用及其導(dǎo)入 ```javascript // 導(dǎo)出 export const domain = 'http://m.waterflosserreview.com'; export default function request() { return new Promise((resolve, reject) => { }); } // 導(dǎo)入 import request, { domain as url } from './modules/request.js'; ``` #### 9. 模塊的合并導(dǎo)出 --- 創(chuàng)建一個模塊（merge.js）進(jìn)行合并導(dǎo)出 ```javascript import * as user from './modules/user.js'; import * as admin from './modules/admin.js'; export { user, admin } ``` 導(dǎo)入合并后的模塊 ```javascript import * as api from './modules/merge.js'; // 訪問方式 // api.user.成員 // api.admin.成員 ``` #### 視頻推薦 --- [后盾人向軍: JS模塊化開發(fā)，編寫高可用代碼](https://www.bilibili.com/video/BV1jJ411r7nb?spm_id_from=333.999.0.0 "后盾人向軍: JS模塊化開發(fā)，編寫高可用代碼")