Kirjastot sulkeumien kautta JavaScriptissä

Usein JavaScriptissä luodaan kirjastoja, jotka edustavat funktioiden kokoelmia muiden ohjelmoijien käyttöön.

Tällaiset kirjastot yleensä kääritään moduuleihin sulkeumien kautta. Tämä tehdään siksi, että kirjaston liittämisen yhteydessä ulkoiseen maailmaan ilmestyisi mahdollisimman vähän funktioita.

Yleensä jokainen kirjasto pyrkii luomaan ulkoiseen maailmaan vain yhden muuttujan - olion, joka sisältää kirjaston funktiot. Samalla kirjaston koodin sisällä osa funktioista on pääasiallisia, ja osa - apufunktioita. On selvää, että haluamme viedä ulkoiseen maailmaan vain tarvittavat funktiot, eivätkä apufunktiot täytä vienti-oliota.

Katsotaanpa esimerkkiä. Oletetaan, että meillä on seuraava funktioiden kokoelma, jonka haluaisimme muuttaa kirjastoksi:

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

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

Kootaan funktiomme moduuliksi:

;(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(''));
	}
	
	// apufunktio
	function sum(arr) {
		let res = 0;
		
		for (let elem of arr) {
			res += +elem;
		}
		
		return res;
	}
})();

Ja nyt viedään kaikki funktiot, paitsi apufunktio:

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

Oletetaan, että meillä on HTML-sivu index.html:

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

Liitetään siihen kirjastomme:

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

Käytetään kirjastomme funktioita:

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

Annettu seuraava koodi:

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

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

Järjestä tämä koodi moduuliksi. Vie ulos kaikki funktiot, paitsi apufunktio.

Tutki underscore-kirjastoa. Tee oma vastaava kirjastosi, toistaen siihen 5-10 alkuperäisen kirjaston funktioita.