# 【ES6】ESModual

[![image-1674749911584.png](https://bookstack.treemanou.com/uploads/images/gallery/2023-01/scaled-1680-/EuEw8ikkjfuNOjuR-image-1674749911584.png)](https://bookstack.treemanou.com/uploads/images/gallery/2023-01/EuEw8ikkjfuNOjuR-image-1674749911584.png)

### 什麼樣的匯出對應什麼樣的匯入

#### 預設匯入(一個匯出檔只能有一個)

<div id="bkmrk-%E5%B8%B8%E8%A6%8B%E7%9A%84%E5%8C%AF%E5%87%BA%E6%96%B9%E5%BC%8F%EF%BC%8C%E9%80%9A%E5%B8%B8%E7%94%A8%E6%96%BC%E5%8C%AF%E5%87%BA%E7%89%A9%E4%BB%B6%EF%BC%8C%E5%9C%A8-r"><div>常見的匯出方式，通常用於匯出物件，在 React 開發中可用來匯出<span style="background-color: #ffff00;">元件</span></div><div></div></div>```JavaScript
/** 匯出頁 exportDefault.js */
export default function fn(){
	console.log("default export")
}

/** 匯入 index.html */
/** export ${name}(隨便取) from ${path} */
<script type="module">
	export aa from "./exportDefault.js";
	aa();
</script>
```

```JavaScript
/** 匯出頁 exportDefault.js */
export default {
	name: "sam",
    func: function(){
    	console.log("預設方法...")
    }
}

/** 匯入 index.html */
/** import ${name}(隨便取) from ${path} */
<script type="module">
	import aa from "./exportDefault.js";
	console.log(aa.name);
    aa.func();
</script>
```

#### 具名匯入(可多個)

<div id="bkmrk-%E5%8F%AF%E7%94%A8%E6%96%BC%E5%8C%AF%E5%87%BA%E5%B7%B2%E5%AE%9A%E7%BE%A9%E7%9A%84%E8%AE%8A%E6%95%B8%E3%80%81%E7%89%A9%E4%BB%B6%E3%80%81%E5%87%BD%E5%BC%8F%EF%BC%8C%E5%B0%88%E6%A1%88"><div>可用於匯出已定義的變數、物件、函式，專案開發中通常用於 “方法匯出”</div><div>第三方的框架、函式、套件很常使用具名定義 “<span style="background-color: #ffff00;">方法</span>”</div></div>```JavaScript
/** 匯出頁 exportModule.js */
export const myName = "Jhon"
export function fn1() {
	console.log("function 1");
}

/** 匯入 index.html */
/** import { 解構名稱 } from ${path} */
<script type="module">
	import {fn1, myName} from "./exportDefault.js";
    console.log("myName",myName);
	fn1();
</script>
```

#### 全部匯出(不常用)

```JavaScript
/** 匯出頁 exportModule.js */
export const myName = "Jhon"
export function fn1() {
	console.log("function 1");
}

/** 匯入 index.html */
/** import * as ${別名} from ${path} */
<script type="module">
	import * as bb from "./exportDefault.js";
    console.log("myName",bb.myName);
	bb.fn1();
</script>
```

#### sideEffect (舊函式庫，立即執行)

```JavaScript
/** 匯出頁 sideEffect.js */
(function(global){
	global.$ = "I am jquery";
})(window)

/** 匯入 index.html */
/** import ${path} */
<script type="module">
	import "./sideEffect.js";
    console.log("$",$); // I am jquery
	bb.fn1();
</script>
```