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 模組內部的函式

函式內部可以裝載任何演算式。

By: lioajimzenPosted on Categories : Categories : Front-End JavaScriptTags:

Leave a Reply

Your email address will not be published. Required fields are marked *