iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

JavaScript學習日記系列 第 29

JavaScript學習日記 : Day29 - import & export

在開發中,為了避免單一檔案太大,通常會使用模組管理,分拆每個檔案視為獨立的模組,透過import、export匯出匯入來使用。

如果要在瀏覽器運行模組化,需要在script標籤加上type="module":

// index.html

<!doctype html>
<script type="module">
  import {sayHi} from './say.js';

  document.body.innerHTML = sayHi('John');
</script>

// say.js

export function sayHi(user) {
  return `Hello, ${user}!`;
}

// 輸出結果

Hello, John!

use strict

module預設就是use strict:

// index.html
<script type="module">
  a = 123; // error, user is not defined
</script>

模組作用域

每個模組都有自己頂級作用域(top-level scope),模組各自作用域中的變數、函數彼此是不可取得的:

// cat.js

let name = "white cat"

// jump.js

console.log(`${name} jump!`) // name is not defined

// index.html

<!doctype html>
<script type="module" src="cat.js"></script>
<script type="module" src="jump.js"></script>

如果要在jump.js中取得cat.js中的變數,可以這樣做:

// cat.js

export let name = "white cat"

// jump.js
import { name } from './cat.js'
console.log(`${name} jump!`) // name is not defined

// index.html

<!doctype html>
<script type="module" src="cat.js"></script>
<script type="module" src="jump.js"></script>

export

expert可以匯出值、object、函數、class等等都可以,export分為兩種類型:

  1. named export(具名輸出) : 匯出前給予特定名稱,匯入也使用一樣的名稱,一個module可以有多個named export
  2. default export(預設輸出) : 一個module只能有一個default export,不需要給名稱。

named export

方法一 :
export後面緊接著let、const

export let a = 123;

export let obj = { name : David }

使用as改名:

const obj = { name : "David" }

export {obj as newName};

方法二 :
export後面緊接著函數表達式

export function test() {
  console.log('這是一段函式')
}

方法三 :
定義好所有物件、方法後,將所有統一匯出:

let a = 123;
let obj1 = { name : 'John' };
let func1 = function() { alert('function1') }

export {a, obj1, func1}

default export

匯出時不需要賦予名稱,但是可以在import時給名稱。

// 純值
export default 123
// 匯出objetc
let a = 123;
let obj1 = { name : 'John' };
let func1 = function() { alert('function1') }

export default {a, obj1, func1}

與具名函數不同,可以直接匯出匿名函數與class:

// 匯出匿名函式
export default function() {
  console.log('這是一段函式');
}

// 匯出 class
export default class {
  constructor(name) {
    this.name = name;
  }
  callName() {
    console.log(this.name);
  }
}

import

匯入的方法要視匯出的形式,是named export或default export,或是都有:

  1. 匯入default export
// demoModule.js
// export file
export default function() {
  console.log('這是一段函式');
}

//import file

import fnName from './demoModule.js'

fnName();

  1. 匯入named export
// demoModule.js
// export file
export const obj = { name: 'John'}; 
export function fn() {
  console.log(`${obj.name} is imported`)
}

// import file
import {obj, fn } from './module.js';
fn(); // John is imported
  1. 重新命名
// demoModule.js
// export file
export const obj = { name: 'John'}; 

// import file
import {obj as newNameObject } from './module.js';
fn(); // John is imported

也可以透過*一次匯入全部的具名函數,搭配as指向一個新物件名稱:

// demoModule.js
// export file
export const obj = { name: 'John'}; 
export function fn() {
  console.log(`名為fn的函數`)
}

// import file
import * as demoModule from './module.js';
demoModule.fn(); // 名為fn的函數
  1. 同時匯入預設、具名
// demoModule.js
// export file
export const obj = { name : "David"}
export default function() {
    console.log('我是預設匯出函數')
}

// import file
import fnName, * as objName from './demoModule.js'

上一篇
JavaScript學習日記 : Day28 - console實用技巧
下一篇
JavaScript學習日記 : Day30 - JavaScript動畫
系列文
JavaScript學習日記30

尚未有邦友留言

立即登入留言