import 與 export 在Node.js 有提到其用法:
Node.js require、module以及exports 模組設定 – Hugo Habor
每一個Javascript檔案可當作獨立模組系統(ES Module)
1. Module（模組）
在 Node.js 中，每一個文件都被視為一個獨立的模組系統。
當你創建一個 JavaScript 檔案，你實際上創建了一個模組。這個模塊可以包含變數、函數、類等，並且可以選擇性地對外暴露或封裝其功能。
範例1 先掌握匯出 Export
將標籤定義 <script type=”module”>
預設匯出：defaultExport.js
在同一層folder 新增一個JS Module 檔案
JS- Module 1內容
export1.js
const component = {
data: [ // 資料
'這是第一句話',
'這是第二句話',
'這是第三句話'
],
removeData(id) {
this.data.splice(id, 1);
this.render();
},
render() { // 渲染方法
const list = document.querySelector('.component ul');
let content = '';
this.data.forEach((item, i) => {
content = `${content}<li>${item} <button type="button" class="btn" data-id="${i}">移除</button></li>`
});
// 縮寫優化
// const content = component.data.map(item => `<li>${item}</li>`).join('');
list.innerHTML = content;
// 加入監聽
const btns = document.querySelectorAll('.btn');
btns.forEach(btn => btn.addEventListener('click', (e)=> {
const id = e.target.dataset.id;
this.removeData(id)
}))
},
init() {
this.render();
}
}
component.init();
匯出JS- Module 內容，進入HTML
>> 預設上是【沒有抽象化名稱】，必須自己命名Module名稱 (非JS檔案名稱)
esModule.html
<!DOCTYPE html><html><head><title>ES 模組</title><meta name="viewport" content="width=device-width, initial-scale=1"><link href="images/favicon.ico" rel="shortcut icon"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.js"></script></head><body class="bg-lighter">
<div class="container main my-5"><div class="row"><main class="col post">
<!-- Vue標題 --><div class="mb-4"><h1 class="mt-0 text-muted">ES 模組</h1><small>檔名：<code>esModule.html</code></small></div>
<div class="component">
<ul></ul>
</div>
<script type="module">
import NewComponent from './export1.js';
NewComponent .init();
</script>
</main>
<aside
class="col-md-3"><div class="sticky-top" style="top: 76px">
<div class="list-group">
<a href="/es6/shorthand.html"
class="list-group-item list-group-item-action
">
縮寫
</a>
<a href="/es6/this.html"
class="list-group-item list-group-item-action
">
this 的運作
</a>
<a href="/es6/arrow_function.html"
class="list-group-item list-group-item-action
">
箭頭函式
</a>
<a href="/es6/separation_of_concerns.html"
class="list-group-item list-group-item-action
">
關注點分離
</a>
<a href="/es6/separation_of_concerns_work.html"
class="list-group-item list-group-item-action
">
關注點分離 練習題
</a>
<a href="/es6/object_reference.html"
class="list-group-item list-group-item-action
">
物件參考特性
</a>
<a href="/es6/promise.html"
class="list-group-item list-group-item-action
">
Promise
</a>
<a href="/es6/esModule.html"
class="list-group-item list-group-item-action
active">
ES Module
</a>
<a href="/es6/esModule_2.html"
class="list-group-item list-group-item-action
">
ES 模組延伸觀念
</a>
</div>
<div class="mt-3 text-end p-2 bg-light rounded">
<small class="text-black-50 fw-light mb-0">文件版本：2022/11/1</small>
</div>
</div>
</aside>
</div>
</div>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
<div class="container-fluid">
<a class="navbar-brand" href="/">Vue 3 練習手冊</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/intro/createApp.html">認識 Vue.js</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/template/v-text.html">模板</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/optionsApi/options-methods.html">方法</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/components/component_register.html">元件</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/advApi/adv-refs.html">進階</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/router/vue-router.html">路由</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/composition/proxy.html">Composition API</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/pinia/layout.html">Pinia</a>
</li>
</ul>
</div>
</div>
</nav>
<footer class="footer py-2 bg-light">
<div class="container text-center">
<small class="text-black-50 fw-light mb-0">六角學院 Vue 課程專屬文件</small>
</div>
</footer>
<link rel="stylesheet" href="/stylesheets/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</body>
</html>
JS- Module 2內容
本範例為 具名匯出型式，
<!DOCTYPE html><html><head><title>ES 模組</title><meta name="viewport" content="width=device-width, initial-scale=1"><link href="images/favicon.ico" rel="shortcut icon"><meta charset="UTF-8"><script src="/javascripts/vendor.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.37/vue.global.js"></script></head><body class="bg-lighter">
<div class="container main my-5"><div class="row"><main class="col post">
<!-- 章節標題 --><div class="mb-4"><h1 class="mt-0 text-muted">ES 模組</h1><small>檔名：<code>esModule.html</code></small></div>
<div class="component">
<ul></ul>
</div>
// 在script 區域內，匯入 module
<script type="module">
import NewComponent from './export1.js';
NewComponent .init();
// #2-2 具名匯入
// 單一匯入（建議寫法）
import {} from './export2.js';
</script>
</main>
<aside
class="col-md-3"><div class="sticky-top" style="top: 76px">
<div class="list-group">
<a href="/es6/shorthand.html"
class="list-group-item list-group-item-action
">
縮寫
</a>
<a href="/es6/this.html"
class="list-group-item list-group-item-action
">
this 的運作
</a>
<a href="/es6/arrow_function.html"
class="list-group-item list-group-item-action
">
箭頭函式
</a>
<a href="/es6/separation_of_concerns.html"
class="list-group-item list-group-item-action
">
關注點分離
</a>
<a href="/es6/separation_of_concerns_work.html"
class="list-group-item list-group-item-action
">
關注點分離 練習題
</a>
<a href="/es6/object_reference.html"
class="list-group-item list-group-item-action
">
物件參考特性
</a>
<a href="/es6/promise.html"
class="list-group-item list-group-item-action
">
Promise
</a>
<a href="/es6/esModule.html"
class="list-group-item list-group-item-action
active">
ES Module
</a>
<a href="/es6/esModule_2.html"
class="list-group-item list-group-item-action
">
ES 模組延伸觀念
</a>
</div>
<div class="mt-3 text-end p-2 bg-light rounded">
<small class="text-black-50 fw-light mb-0">文件版本：2022/11/1</small>
</div>
</div>
</aside>
</div>
</div>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-secondary">
<div class="container-fluid">
<a class="navbar-brand" href="/">Vue 3 練習手冊</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="/es6/shorthand.html">JS 必備觀念</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/intro/createApp.html">認識 Vue.js</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/template/v-text.html">模板</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/optionsApi/options-methods.html">方法</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/components/component_register.html">元件</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/advApi/adv-refs.html">進階</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/router/vue-router.html">路由</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/composition/proxy.html">Composition API</a>
</li>
<li class="nav-item">
<a class="nav-link " href="/pinia/layout.html">Pinia</a>
</li>
</ul>
</div>
</div>
</nav>
<footer class="footer py-2 bg-light">
<div class="container text-center">
<small class="text-black-50 fw-light mb-0">六角學院 Vue 課程專屬文件</small>
</div>
</footer>
<link rel="stylesheet" href="/stylesheets/all.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
</body>
</html>
HTML-Script 匯入其他Module
引用export2.js 模組內部的函式
函式內部可以裝載任何演算式。
