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，你可以保持變量和函數的私有性，只暴露你想要公開的接口。這是模組模式的一種實現，允許你創建公共和私有方法，而不必公開整個函數。
• 避免全局命名空間污染: IIFE 允許你在一個封閉的作用域中編寫代碼，而不是在全局作用域中。這樣可以減少全局變量的數量，並降低命名空間污染的風險。
• 編碼風格和結構: 使用 IIFE 可以使程式碼更加組織化和模組化，這在大型項目中是非常重要的。

IIFE 的語法和範例

想像你有一個玩具箱，這個玩具箱是特別的，因為一旦你把玩具放進去並關上蓋子，你就不能再打開它或者拿出裡面的玩具了。但是，這個玩具箱有一個小窗口，你可以通過這個窗口操作裡面的玩具。

IIFE (立即調用的函數表達式) 就像這個玩具箱。當你創建一個 IIFE，你其實是在說：「嘿，我要做一些事情，但我不想其他人能隨便改變我做的事情。」 所以，你把所有的工具和材料都放進這個「箱子」裡，然後關上它。

但是，你想要讓其他人可以透過小窗口與裡面的玩具互動。這時候，你會在小窗口放一些按鈕或標籤。例如，你可能會在窗口上放一個按鈕叫做 onConfirm，另一個叫做 validateButton。這些按鈕是連接到箱子裡面的玩具的，所以當其他人按下這些按鈕，箱子裡的玩具就會做一些事情。

現在，讓我們把這個概念應用到程式碼上。當你創建一個 IIFE，你是在建立一個「箱子」，裡面包含函數和變數。這些都是私有的，只能在「箱子」裡使用。但你可以選擇把一些函數連接到「窗口」的按鈕上，讓外面的人可以使用它們。

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

var mySpecialBox = (function () {
	// 這裡是在「箱子」裡面
	var secretTool = "magic wand"; // 這是私有的，外面的人看不到

	function doMagic() {
		// 這個函數是私有的，但我們可以把它連接到窗口的按鈕上
		console.log("Doing magic with the " + secretTool);
	}

	// 這裡是「窗口」的按鈕
	return {
		onConfirm: doMagic, // 連接 doMagic 函數到 onConfirm 按鈕
	};
})();

現在，外面的人不能直接訪問 secretTool 或 doMagic，因為它們是在「箱子」裡面的。但是，他們可以通過按 mySpecialBox.onConfirm 這個按鈕來觸發 doMagic 函數。

這就是 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 →