Praktische Anwendung

Nehmen wir an, wir haben zwei Divs mit Zahlen:

<div id="div1">10</div>
<div id="div2">10</div>

Lassen Sie uns so gestalten, dass beim Klick auf das erste Div sein Wert quadriert wird, und beim Klick auf das zweite Div - kubiert.

Organisieren wir unseren Code in Form von zwei Modulen:

;(function() {
	let elem = document.querySelector('#div1'); // erstes Div
	
	function func(num) {
		return num * num; // quadrieren
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // zweites Div
	
	function func(num) {
		return num * num * num; // kubieren
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Nun können wir in jedem der Module beliebige Variablen und Funktionen verwenden, ohne befürchten zu müssen, dass sie mit anderen Variablen und Funktionen unseres Skripts in Konflikt geraten.

Zum Beispiel speichern wir beide Elemente in der Variable elem - jedes in seiner eigenen Variable seines eigenen Moduls. Wenn es hier keine Module gäbe, müsste man verschiedene Variablen zur Speicherung unserer Elemente einführen. Mit Modulen können wir jedoch beruhigt unsere Variable verwenden, ohne befürchten zu müssen, dass jemand diese Variable ebenfalls verwenden möchte.