Module pattern trong plain JavaScript

Trong plain JavaScript, như đã biết là nó không hề có khái niệm module. Tuy nhiên nhờ có cơ chế closure mà chúng ta có thể thực thi được module pattern.

Ví dụ:

function counter(initValue) {
	var currentValue = initValue;
	
	function increase(change) {
		currentValue += change;
	}
	
	function descrease(change) {
		currentValue -= change;
	}

	function getCurrentValue() {
		return currentValue;
	}

	return {
		increase: increase,
		descrease: descrease,
		getCurrentValue: getCurrentValue
	};
}

var c = counter(10);
console.log(c.getCurrentValue()); // 10
c.increase(50);
console.log(c.getCurrentValue()); // 60
c.descrease(20);
console.log(c.getCurrentValue()); // 40

Module phải đảm báo tính đóng gói, do đó chúng ta đã khai báo một biến local currentValue bên trong hàm counter. Biến local này chỉ được truy cập bởi các hàm (cũng chính là các closure) increase, descrease và getCurrentValue nhưng không thể được truy cập từ bên ngoài. Do đó module đã ẩn đi thông tin mà nó không muốn bên ngoài truy cập vào và chỉ cung cấp các public API để truy cập vào các thông tin đó.

Để chỉ có duy nhất một instance counter, khi đó chúng ta sử dụng Immediately Invoked Function Expression (IIFE) như sau:

var counter = (function() {
	var currentValue = 0;
	
	function initializeValue(initValue) {
		currentValue = initValue;
	}

	function getCurrentValue() {
		return currentValue;
	}
	
	function increase(change) {
		currentValue += change;
	}
	
	function descrease(change) {
		currentValue -= change;
	}
	
	return {
		initializeValue: initializeValue,
		getCurrentValue: getCurrentValue,
		increase: increase,
		descrease: descrease
	};
})();

counter.initializeValue(10);
console.log(counter.getCurrentValue()); // 10
counter.increase(50);
console.log(counter.getCurrentValue()); // 60
counter.descrease(20);
console.log(counter.getCurrentValue()); // 40

Đây cũng chính là Singleton pattern.

Đọc thêm

[1] http://javascriptissexy.com/understand-javascript-closures-with-ease/
[2] https://javascript.info/closure
[3] https://www.pluralsight.com/guides/front-end-javascript/javascript-closures