匯出

• 需先將標籤定義 <script type="module">
• 預設匯出：defaultExport.js-常見的匯出方式，通常用於匯出物件，在 Vue 開發中可用來匯出元件(每個檔案唯一)

  export defaut  {
  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)=> {
      // #2 重點，移除項目是先移除資料，而不是直接移除 DOM
      // 如果要進行 AJAX 或更複雜行為，不會因為 DOM 與資料混合而難以運作
      const id = e.target.dataset.id;
      this.removeData(id)
    }))
  },
  init() {
    this.render();
  }
}

• 具名匯出：namedExport.js-可用於匯出已定義的變數、物件、函式，專案開發中通常用於 “方法匯出”。第三方的框架、函式、套件很常使用具名定義 “方法”。(每個檔案多個)

export const a = 1;
export function b() {
  console.log(1);
}
export function c(a, b) {
  return a + b;
}

• 預設匯出與具名匯出是可混用的

匯入

• 預設匯入：因為預設匯出沒有名字，所以可以為它命名。注意：因為傳參考的特性，因此元件無法重複利用（Vue.js 中會解決此問題）

import newComponent from "./export1.js";
newComponent.init();

• 具名匯入：單一匯入（建議寫法）、全部匯入（不建議，錯誤較難發現）

//單一匯入
import { a, b } from "./export1.js";
console.log(a);
b();
//全部匯入
import * as all from "./export1.js";
console.log(all.a);
all.b();

SideEffect

(function (global) {
  global.$ = '我是 jQuery';
})(window);

import  "./sideEffect.js";

每一個 type="module" 的作用域都是獨立的：

<script type="module">
var a = 1;
window.b = 2;
</script>

<script>
console.log(a); //a is not defined
console.log(b); //b is not defined
</script>

<script type="module">
console.log(a); //a is not defined
console.log(b); //2
</script>