ES模組Module

# ES模組Module ###### tags: `Vue3` <style> .h2 { background: linear-gradient(135deg,#fff,#537479) ; color: #537479; display:block; padding: 6px 5px; border-radius: 4px; } .h3 { background: linear-gradient(180deg,#fff 50%,#c9d5d4) ; color: #537479; display:block; padding: 6px 5px; border-bottom: 3px solid #537479; } .h4 { color: #537479; font-weight:bold; font-size:1.1em; } </style> ### ES module的import、commonJS的require :::info **CommonJS:** CommonJS(建立模組的約定) 代表的僅僅只是 require 和 export 這樣宣告模組的語法 ::: ![](https://i.imgur.com/CeB94N3.png =600x) :::info 單一檔案程式碼不要太長(200，至多不要出過300) 於是會使用元件、函式庫、模組 ::: ![](https://i.imgur.com/rjVWP8E.png) 每一個`<script type="module">`的==作用域都是獨立的== ### 「預設」匯入(html)，匯出(javascript) :::info 常見的匯出方式，通常用於匯出物件，在Vue開發中可用來匯出元件 ==一個檔案能有多個具名匯出== ==一個檔案只能有一個預設匯出== ::: ![](https://i.imgur.com/Xlfw4Vw.png) **html檔案:** ![](https://i.imgur.com/oG9VXew.png) **javascript檔案:** ![](https://i.imgur.com/D40rYcF.png) ### 「具名」匯入(html)，匯出(javascript) 匯出的同時就必須宣告一個名稱 :::info 可用於匯出已定義的變數、物件、函式，專案開發中通常用於"方法匯出" 第三方的框架、函式、套件很常使用具名定義"方法" ::: ### ➤單一匯入(建議寫法) ==解構方式匯入== **html檔案:** ```htmlembedded <script type="module"> import { a, b } from './export2.js'; console.log(a) //1 b(); //1 </script> ``` **javascript檔案:** ```javascript export const a = 1; export function b(){ console.log(1) } export function c(a,b){ return a+b; } ``` ### ➤全部匯入(不建議，錯誤較難發現) html檔案 ```htmlembedded <script type="module"> import * as all from './export2.js'; console.log(all.a) //1 all.b() //1 console.log(all.c(1,2)) //3 </script> ``` javascript檔案 ```javascript export const a = 1; export function b(){ console.log(1) } export function c(a,b){ return a+b; } ``` ### sideEffect.js(較舊) :::info sideEffect.js檔案並沒進行匯出，但是它可以直接進行匯入，而且匯入之後會立即執行。在舊的library常見的方法。 ::: html檔案 ```htmlembedded <script type="module"> import './sideEffect.js'; console.log($) //我是jQuery </script> ``` javascript檔案 ```javascript (function (global){ global.$ = '我是jQuery' })(window); ``` 內容為立即函式 ### 範例一 **html檔案:** ```htmlembedded <body> <script src="./js/index.js" type="module"></script> </body> ``` **javascript檔案:** index.js檔案: ```javascript import config from './config.js' ``` config.js檔案: ```javascript export default { 'tdxClientId': 'xxxxxxxx-xxxxxxxx-xxxx-xxxx', 'tdxClientSecret': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx' } ``` ### 範例二 text.js檔案: ```javascript export const deviceName = 'iPhone' export const mobilesOnSale = ['Samsung', 'Apple', 'Huawei'] export const offers = { priceCurrency: 'TWD', price: '26,900', } export const logPrice = (price) => { console.log('price: ', price) } export function logDeviceName(deviceName) { console.log(deviceName) } ``` index.js檔案: ```javascript import { deviceName, mobilesOnSale, offers, logPrice, logDeviceName } from './text.js' console.log(deviceName) //iPhone console.log(mobilesOnSale) //['Samsung', 'Apple', 'Huawei'] console.log(offers) //{priceCurrency: 'TWD',price: '26,900'} console.log(logPrice(600)) //price: 600 console.log(logDeviceName('galaxy')) //galaxy ``` ### ESM方式載入Vue 網路上找到的「ESM」，如果條件允許是可以使用import方式載入 ### Vue的ESM https://cdnjs.com/libraries/vue ![](https://i.imgur.com/PQoyBH0.png) 比對語法:https://v3.vuejs.org/guide/introduction.html#getting-started ![](https://i.imgur.com/EvafADx.png) ### ➤範例: ```htmlembedded <body> <div id="app">{{counter}}</div> </body> ``` ![](https://i.imgur.com/JZx88ff.png) ### 加入Vue的ESM ```htmlembedded <body> <div id="app">{{counter}}</div> <script type="module"> import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.26/vue.esm-browser.min.js'; const Counter = { data() { return { counter: 0 } } } createApp(Counter).mount('#app') </script> </body> ``` ![](https://i.imgur.com/V7Y091v.png) 此時就可以更改數值了 ```htmlembedded <body> <div id="app">{{counter}}</div> <script type="module"> import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.26/vue.esm-browser.min.js'; const Counter = { data() { return { counter: 5 } } } createApp(Counter).mount('#app') </script> </body> ``` ![](https://i.imgur.com/4fpcEUT.png) --- [[ES6] Javascript Import & Export 教學 | Modules | 模組化](https://www.youtube.com/watch?v=pbVlFc0bTt8&ab_channel=BigBoyCanCode) [用十分鐘瞭解JavaScript的模組 -- 《還有關於npm套件管理的那些事情》](https://www.youtube.com/watch?v=7QNi-XJq4bU&ab_channel=%E9%99%B3%E9%8D%BE%E8%AA%A0) [[ 想入門，我陪你 ] Re Vue 重頭說起｜Day 9：基礎模組化](https://www.youtube.com/watch?v=KQRfZ07bfAQ&ab_channel=Alex%E5%AE%85%E5%B9%B9%E5%98%9B)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.