Front-End JavaScript

Vue – 運行ES Module，import與export

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

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

lioajimzen

Share
Published by
lioajimzen
Tags: JavascriptJSObjectVue3VueJS
12 months ago

Recent Posts

當你的Windows應用程式完全無法執行時，該怎麼辦?

作者今天遇到一個很奇怪的問題 寫程式寫到一半... 點擊應用程式時... 怎麼都跳不出畫面... 後來查詢了一下是Reg註冊可能被微軟更新給搞掉了... 文章資訊來源: 【以解決】各位.exe檔案打不開，不要相信"在 Windows 7 或 Windows Vista 中無法打開 .EXE 檔案"這篇文章…

2 years ago

Python environments in VS Code-建立虛擬環境

Python environments in VS CodePython-建立虛擬環境

2 years ago

Node.js 核心模組-create-server

Node.js可以提供你很多模組，今天來探索如何使用 Node.js 的 http 模組來架設一個簡單的伺服器。 本篇使用模組require 載入你所需要的模組。這次我們使用'http' 模組來創造一個簡單的server。 資料參考 Node.js - createServer 起手式 - iT…

2 years ago

Node.js require、module以及exports 模組設定

針對Node.js來談談 require、module以及exports 模組設定。這些概念允許開發者將大型程序分解成小的、可管理的、可重用的部分，稱為模塊。 下面將逐一介紹這些概念，以及它們如何與 JavaScript 關聯。 An Essential Guide to Node.js Modules (javascripttutorial.net) 1. Module（模組）…

2 years ago

JSON與foreach的逐一條列應用。

像是很多專案必須讀取國家資料中心的metadata，許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲；拿一個範例來嘗試看看就知道這些語法的實際用途。 [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) - Cool3c 在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據! 目的 來抓取空位數量 >15， 抓取空位數量 <15。…

2 years ago

JavaScript-forEach()方法

當你想要呼叫陣列裡的資料，你可以使用forEach()的方法，forEach() 會需要隱含數的觀念。 把我們想要執行的函式，從頭到尾逐一（iterates through）的把陣列裡的元素帶進去這個函式，整個處理一遍。 第一個參數遍歷的元素(按照元素順序顯示)，第二個參數是 index，即使你改了參數名字，第一個也一定是遍歷的元素，第二個一定是 index。 https://twitter.com/tejinder_id/status/1487347914628235264 參考資料: 想知道嗎：JS forEach()的 index 位置 - W.S.Wade…

2 years ago