[TOC] #### 1. 模塊的基本使用 --- 定義一個js模塊 ```javascript let title = '辰風沐陽' 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. 模塊延遲解析 --- 因為模塊之間會有依賴關系，所以系統(tǒng)在處理模塊時會加載全部模塊后才會執(zhí)行模塊 所以模塊化js代碼放在 button 標簽之前，也能找到 button 標簽 ```javascript <script type="module"> console.log(document.querySelector('button')) </script> <button>測試</button> ``` #### 3. 作用域在模塊中的體現 --- 模塊有自己的獨立作用域，在模塊中定義的變量只能在模塊內部使用 在模塊內部可以使用全局作用域的變量，但在外部則不能使用模塊內部的變量，只有使用 `export` 導出才能在外部使用 #### 4. 模塊的預解析 --- 無論模塊加載多少次，只會在第一次時產生執(zhí)行 #### 5. 模塊的具名導出和導入 --- 具名導出: 顧名思義，就是導出具有名稱的成員 ```javascript let site = 'wm.waterflosserreview.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 = 'http://m.waterflosserreview.com'; export default function request() { return new Promise((resolve, reject) => { }); } // 導入 import request, { domain as url } from './modules/request.js'; ``` #### 9. 模塊的合并導出 --- 創(chuàng)建一個模塊（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模塊化開發(fā)，編寫高可用代碼](https://www.bilibili.com/video/BV1jJ411r7nb?spm_id_from=333.999.0.0 "后盾人向軍: JS模塊化開發(fā)，編寫高可用代碼")