iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
自我挑戰組

Be friend with JavaScript系列 第 30

Day 30 - Module

Module 為模組,當網頁的程式碼越來越多,越來越龐大的時候,會需要把 code 拆分為很多個部分,把每個部分變成獨立的模組來使用,避免檔案過大,而在每個檔案中可以匯入其他模組來做使用,也可以匯出模組讓其他檔案使用。

  • 匯出的方式為 export,且分為 named export(具名匯出)和 default export(預設匯出)。
  • named export 在 module 中可以有很多個,但 default export 只能有一個。
  • 匯入的方式為 import
  • 要在 <script> 中把 type 設定成 module:<script type="module">
  • module 可以是 function, array, object, variable...等等。

當只有一個 module 時
例如:匯出 index.js 中的 HELLO 這個變數,並在 app.js 匯入 HELLO 來使用

// index.js
export const HELLO = 'Hello';
// app.js
import { HELLO } from './index.js';
console.log(HELLO); // "Hello"

當有多個 module 時
例如:匯出 index.js 中的 HELLO, PEOPLE 這兩個變數,也匯出 sayHi 這個函式

// index.js
export const HELLO = 'Hello';
export const PEOPLE = ['Bob', 'Jen', 'Amy'];
export function sayHi(user) {
  console.log(`Hello, ${user}!`);
}

或者也可以先宣告,再一起匯出,像這樣:

// index.js
const HELLO = 'Hello';
const PEOPLE = ['Bob', 'Jen', 'Amy'];
function sayHi(user){
    console.log(`Hello, ${user}!`);
}
export { HELLO, PEOPLE, sayHi };

在 app.js 匯入 index.js 的 module

// app.js
import { HELLO, PEOPLE, sayHi } from './index.js';
console.log(HELLO); // "Hello"
console.log(PEOPLE); // ['Bob', 'Jen', 'Amy']
sayHi("John"); // Hello, John!

可以利用 as 來修改 module 名稱

  • export 中的用法

例如:將 index.js 中的 HELLO 和 sayHi 在匯出時改成 GREET 和 Hi

// index.js
const HELLO = 'Hello';
function sayHi(user){
    console.log(`Hello, ${user}!`);
}
export { HELLO as GREET,sayHi as Hi }

在 app.js 中匯入 GREET 和 Hi

// app.js
import { GREET, Hi } from './index.js';
console.log(GREET); // "Hello"
Hi("Mary"); // Hello, Mary!
  • import 中的用法
    例如:匯出 index.js 中的內容,並在 app.js 將其匯入時修改
// index.js
const HELLO = 'Hello';
function sayHi(user){
    console.log(`Hello, ${user}!`);
}
export { HELLO, sayHi }
// app.js
import { HELLO as GREET, sayHi as Hi } from './index.js';
console.log(GREET); // "Hello"
Hi("Mary"); // Hello, Mary!

如果有很多要導入的內容,可以使用 import * as <obj>

// index.js
function sayHi(user) {
  alert(`Hello, ${user}!`);
}
function sayBye(user) {
  alert(`Bye, ${user}!`);
}
export {sayHi, sayBye};
// app.js
import * as say from './index.js';
say.sayHi('Mary'); // Hello, Mary!
say.sayBye('John'); // Bye, John!

default export
前面介紹的都是具名匯出,接著來介紹預設匯出,這種方式不需要有名稱(不用變數)就可以直接匯出,但要注意的是每個文件可能只有一個 export default,且匯入時不需要使用大括號 { }
例如:

// index.js
export default 'Hi';

export dafault 不需要變數名稱且唯一,所以在匯入 default export 時取任意名字都能找到它

// app.js
import a from './index.js';
console.log(a); // Hi

or

// index.js
let name = "Lisa";
export default name;
// app.js
import name from './index.js';
console.log(name); // Lisa

參考資料:
https://zh.javascript.info/import-export


上一篇
Day 29 - Math Object & Date Object
下一篇
認識 React.js
系列文
Be friend with JavaScript39

尚未有邦友留言

立即登入留言