ไลบรารีผ่านการปิดฟังก์ชันใน JavaScript

บ่อยครั้งใน JavaScript มีการสร้างไลบรารี, ซึ่งเป็นชุดของฟังก์ชันสำหรับให้โปรแกรมเมอร์คนอื่นใช้งาน

ไลบรารีดังกล่าวมักจะถูกห่อหุ้มไว้ในโมดูล ผ่านการปิดฟังก์ชัน (closures) ซึ่งทำไปเพื่อให้ เมื่อเชื่อมต่อไลบรารีแล้ว โลกภายนอก จะมีฟังก์ชันปรากฏให้น้อยที่สุด

โดยปกติแล้วไลบรารีแต่ละตัวพยายามสร้าง ตัวแปรในโลกภายนอกเพียงตัวเดียวเท่านั้น - คืออ็อบเจกต์ที่มีฟังก์ชันของไลบรารี ขณะที่ภายใน โค้ดของไลบรารี ฟังก์ชันบางส่วนเป็น หลัก และบางส่วนเป็นฟังก์ชันเสริม เห็นได้ชัดว่า เราต้องการส่งออกไปยังโลกภายนอกเฉพาะ ฟังก์ชันที่จำเป็นเท่านั้น โดยไม่ทำให้อ็อบเจกต์ที่ส่งออก รกไปด้วยฟังก์ชันเสริม

มาดูตัวอย่างกัน สมมติว่าเรา มีฟังก์ชันชุดต่อไปนี้ ซึ่งเรา ต้องการเปลี่ยนให้เป็นไลบรารี:

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(''));
}

// ฟังก์ชันเสริม
function sum(arr) {
	let res = 0;
	
	for (let elem of arr) {
		res += +elem;
	}
	
	return res;
}

มาจัดฟังก์ชันของเราในรูปแบบโมดูล:

;(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(''));
	}
	
	// ฟังก์ชันเสริม
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
})();

และตอนนี้ส่งออกฟังก์ชันทั้งหมด ยกเว้น ฟังก์ชันเสริม:

;(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(''));
	}
	
	// ฟังก์ชันเสริม
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
	
	window.math = {square, cube, avg, digitsSum};
})();

สมมติว่าเรามีหน้า HTML index.html:

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

มาเชื่อมต่อไลบรารีของเรากับหน้า:

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

มาใช้ฟังก์ชันจากไลบรารีของเรา:

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

มีโค้ดต่อไปนี้:

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;
}

// ฟังก์ชันเสริม
function sum(arr, pow) {
	let res = 0;
	
	for (let elem of arr) {
		res += elem ** pow;
	}
	
	return res;
}

จัดโค้ดนี้ในรูปแบบโมดูล ส่งออก ฟังก์ชันทั้งหมดออกไปด้านนอก ยกเว้นฟังก์ชันเสริม

ศึกษาไลบรารี underscore ทำไลบรารีของคุณเองที่คล้ายกัน โดยทำซ้ำ 5-10 ฟังก์ชันจากไลบรารี ต้นฉบับ