Bibliotheken via sluitingen in JavaScript

Vaak worden er in JavaScript bibliotheken gemaakt, die verzamelingen functies vertegenwoordigen voor gebruik door andere programmeurs.

Zulke bibliotheken worden meestal verpakt in modules via sluitingen. Dit wordt gedaan zodat bij het aansluiten van de bibliotheek in de externe wereld er zo min mogelijk functies verschijnen.

Over het algemeen probeert elke bibliotheek in de externe wereld slechts één variabele te creëren - een object met de functies van de bibliotheek. Tegelijkertijd zijn binnenin de code van de bibliotheek sommige functies hoofdfuncties, en andere - hulpfuncties. Het is duidelijk dat we naar de externe wereld alleen de benodigde functies willen exporteren, zonder het geëxporteerde object te vervuilen met hulpfuncties.

Laten we naar een voorbeeld kijken. Stel dat we de volgende set functies hebben, die we graag in een bibliotheek zouden willen veranderen:

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

// hulpfunctie
function sum(arr) {
	let res = 0;
	
	for (let elem of arr) {
		res += +elem;
	}
	
	return res;
}

Laten we onze functies vormgeven als een 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(''));
	}
	
	// hulpfunctie
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
})();

En nu exporteren we alle functies, behalve de hulpfunctie:

;(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(''));
	}
	
	// hulpfunctie
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
	
	window.math = {square, cube, avg, digitsSum};
})();

Stel dat we een HTML-pagina index.html hebben:

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

Laten we onze bibliotheek erop aansluiten:

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

Laten we gebruikmaken van de functies uit onze bibliotheek:

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

Gegeven de volgende code:

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

// hulpfunctie
function sum(arr, pow) {
	let res = 0;
	
	for (let elem of arr) {
		res += elem ** pow;
	}
	
	return res;
}

Vorm deze code om tot een module. Exporteer naar buiten alle functies, behalve de hulpfunctie.

Bestudeer de bibliotheek underscore. Maak je eigen vergelijkbare bibliotheek, herhaal er 5-10 functies van de originele bibliotheek in.