Thư viện thông qua closures trong JavaScript

Thường xuyên trong JavaScript, các thư viện được tạo ra, đại diện cho các tập hợp hàm để sử dụng bởi các lập trình viên khác.

Các thư viện như vậy thường được bọc trong các module thông qua closures. Điều này được thực hiện để khi kết nối thư viện với thế giới bên ngoài càng ít hàm xuất hiện càng tốt.

Theo quy tắc, mỗi thư viện cố gắng tạo ra trong thế giới bên ngoài chỉ một biến - một đối tượng chứa các hàm của thư viện. Đồng thời bên trong mã của thư viện, một số hàm là chính, còn một số - là phụ trợ. Rõ ràng là, ra thế giới bên ngoài chúng ta muốn xuất khẩu chỉ các hàm cần thiết, không làm lộn xộn đối tượng được xuất khẩu bằng các hàm phụ trợ.

Hãy xem xét một ví dụ. Giả sử chúng ta có tập hợp hàm sau, mà chúng ta muốn biến thành một thư viện:

function square(num) {
	return num ** 2;
}
function cube(num) {
	return num ** 3;
}
function avg(arr) {
	return sum(arr, 1) / arr.length;
}
function digitsSum(num) {
	return sum(String(num).split(''));
}

// hàm phụ trợ
function sum(arr) {
	let res = 0;
	
	for (let elem of arr) {
		res += +elem;
	}
	
	return res;
}

Hãy đóng gói các hàm của chúng ta dưới dạng một module:

;(function() {
	function square(num) {
		return num ** 2;
	}
	function cube(num) {
		return num ** 3;
	}
	function avg(arr) {
		return sum(arr, 1) / arr.length;
	}
	function digitsSum(num) {
		return sum(String(num).split(''));
	}
	
	// hàm phụ trợ
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
})();

Và bây giờ hãy xuất khẩu tất cả các hàm, ngoại trừ hàm phụ trợ:

;(function() {
	function square(num) {
		return num ** 2;
	}
	function cube(num) {
		return num ** 3;
	}
	function avg(arr) {
		return sum(arr, 1) / arr.length;
	}
	function digitsSum(num) {
		return sum(String(num).split(''));
	}
	
	// hàm phụ trợ
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
	
	window.math = {square, cube, avg, digitsSum};
})();

Giả sử chúng ta có trang HTML index.html:

<html>
	<head>
		<script>
			
		</script>
	</head>
</html>

Hãy kết nối thư viện của chúng ta với nó:

<html>
	<head>
		<script src="math.js"></script>
		<script>
			
		</script>
	</head>
</html>

Hãy sử dụng các hàm từ thư viện của chúng ta:

<html>
	<head>
		<script src="math.js"></script>
		<script>
			alert(math.avg([1, 2, 3]) + math.square());
		</script>
	</head>
</html>

Cho đoạn mã sau:

function avg1(arr) {
	return sum(arr, 1) / arr.length;
}

function avg2(arr) {
	return sum(arr, 2) / arr.length;
}

function avg3(arr) {
	return sum(arr, 3) / arr.length;
}

// hàm phụ trợ
function sum(arr, pow) {
	let res = 0;
	
	for (let elem of arr) {
		res += elem ** pow;
	}
	
	return res;
}

Hãy đóng gói mã này dưới dạng một module. Xuất khẩu ra ngoài tất cả các hàm, ngoại trừ hàm phụ trợ.

Nghiên cứu thư viện underscore. Tạo thư viện tương tự của riêng bạn, lặp lại trong đó 5-10 hàm của thư viện gốc.