JS IIFE 筆記 - 立即調用函式

IIFE 是什麼？

IIFE 是 “Immediately Invoked Function Expression” 的縮寫，中文為「立即調用的函數表達式」。這是一種程式設計模式，指的是一個函數被定義後立刻執行。

IIFE 的典型語法是將一個匿名函數包裹在括號 () 中，然後在其後再加上一對括號以立即調用該函數。例如：

1
2
3

(function () {
	// 這裡的代碼只在此 IIFE 的範疇內運行
})();

這種模式的主要用途是創建一個新的作用域，從而避免變數污染全局作用域。在 IIFE 內部聲明的變數和函數只在 IIFE 的作用域內有效，而不會影響到外部的作用域。

這在開發大型應用時特別有用，因為它可以幫助避免不同部分的程式碼之間的命名衝突。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

var myModule = (function () {
	var privateVar = "I am private";

	function privateFunction() {
		console.log(privateVar);
	}

	return {
		publicMethod: function () {
			privateFunction();
		},
	};
})();

myModule.publicMethod(); // 輸出 "I am private"

在上面的例子中，myModule 是一個使用 IIFE 創建的模組。它具有一個公開的方法 publicMethod，而 privateVar 和 privateFunction 則被封裝在 IIFE 內部，無法從外部訪問。

IIFE 的語法和範例

想像有一個玩具箱，裡面的玩具只能在箱子內使用，外面的人無法直接改變它們，但可以透過箱子上的按鈕操作。

IIFE（立即調用的函數表達式）就像這個玩具箱。它能將變數和函數封裝起來，保護它們不受外部影響。同時，可以選擇性地在「窗口」上提供一些按鈕（方法或屬性），讓外部可以與封裝內部互動。

1
2
3
4
5
6
7
8
9
10
11
12
13

const toyBox = (function () {
	let toy = "玩具車";

	function play() {
		console.log(`玩${toy}`);
	}

	return {
		onPlay: play, // 提供給外部使用的按鈕
	};
})();

toyBox.onPlay(); // 輸出：玩玩具車

這樣，toy 是私有的，只有透過 onPlay 才能與它互動。這就是 IIFE 的主要用途。

IIFE 的優點

• 保護私有性： 將變數和函數限制在自己的作用域中，只暴露必要的接口，實現模組化的公共與私有方法分離。
• 避免全域命名空間污染： 創建一個封閉作用域，將程式碼隔離，減少全域變數的使用，降低命名衝突的風險。
• 改善程式碼結構： IIFE 有助於組織和模組化程式碼，讓大型專案更容易維護和理解。

IIFE 進階實戰運用

這是實際專案中使用情況，詳細流程可參考：淘汰 JQuery Dialog 後自己開發一個高度客製化的 Dialog UI Component

創建基本的 Dialog 組件

從創建一個基本的 Dialog 組件開始。使用 IIFE 來封裝程式碼，這樣可避免污染全局命名空間，並保持內部變數和函數的私密性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var CustomDialog = (function () {
	function open(options) {
		// 這裡是創建和顯示 Dialog 的程式碼
	}

	function close() {
		// 這裡是關閉 Dialog 的程式碼
	}

	// 暴露 open 函數給外部使用
	return {
		open: open,
	};
})();

現在有一個基本的 Dialog 組件，可以打開，但還不能從外部控制關閉它。

讓 Dialog 更靈活

現在要進行一些進階的實戰運用。我們想要能夠在 Dialog 的 onConfirm 回調函數中決定是否關閉 Dialog。

為此，我們需要將 close 函數作為參數傳遞給 onConfirm 回調。這樣，開發人員可以在 onConfirm 中根據業務邏輯決定是否調用它。

更新後的 IIFE 組件程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

var CustomDialog = (function () {
	function open(options) {
		// 在這裡創建 Dialog

		// 當確認按鈕被按下時
		var confirmButton = document.querySelector(".confirm-button");
		confirmButton.addEventListener("click", function () {
			// 把 close 函數傳遞給 onConfirm
			options.onConfirm(close);
		});
	}

	function close() {
		// 這裡是關閉 Dialog 的程式碼
	}

	// 暴露 open 函數給外部使用
	return {
		open: open,
	};
})();

使用 IIFE 創建 Dialog 的實例

現在，在使用 CustomDialog 時，我們可以在 onConfirm 回調函數中控制何時關閉 Dialog。

1
2
3
4
5
6
7
8
9
10

CustomDialog.open({
	onConfirm: function (closeDialog) {
		// 這裡是當確認按鈕被按下時的業務邏輯

		// 根據條件判斷是否關閉 Dialog
		if (someCondition) {
			closeDialog();
		}
	},
});

• ← Previous Post
• Next Post →