Bibliotheken durch Closures in JavaScript

Oft werden in JavaScript Bibliotheken erstellt, die Sammlungen von Funktionen zur Nutzung durch andere Programmierer darstellen.

Solche Bibliotheken werden normalerweise in Module durch Closures verpackt. Dies geschieht, damit beim Einbinden der Bibliothek in der externen Welt möglichst wenige Funktionen erscheinen.

In der Regel bemüht sich jede Bibliothek, nur eine Variable in der externen Welt zu erstellen - ein Objekt mit den Funktionen der Bibliothek. Dabei sind innerhalb des Bibliothekscodes einige Funktionen Hauptfunktionen, andere sind Hilfsfunktionen. Offensichtlich wollen wir nur die benötigten Funktionen exportieren, ohne das exportierte Objekt mit Hilfsfunktionen zu überladen.

Schauen wir uns ein Beispiel an. Nehmen wir an, wir haben die folgende Funktionssammlung, die wir gerne in eine Bibliothek verwandeln möchten:

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

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

Lassen Sie uns unsere Funktionen als Modul gestalten:

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

Und nun exportieren wir alle Funktionen, außer der Hilfsfunktion:

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

Nehmen wir an, wir haben eine HTML-Seite index.html:

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

Binden wir unsere Bibliothek ein:

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

Nutzen wir die Funktionen aus unserer Bibliothek:

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

Gegeben ist der folgende 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;
}

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

Gestalten Sie diesen Code als Modul. Exportieren Sie alle Funktionen nach außen, außer der Hilfsfunktion.

Studieren Sie die Bibliothek underscore. Erstellen Sie Ihre eigene ähnliche Bibliothek, indem Sie 5 bis 10 Funktionen der originalen Bibliothek nachbauen.