Application pratique

Supposons que nous ayons deux divs avec des nombres :

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

Faisons en sorte qu'un clic sur le premier div élève sa valeur au carré, et qu'un clic sur le deuxième div l'élève au cube.

Organisons notre code sous forme de deux modules :

;(function() {
	let elem = document.querySelector('#div1'); // premier div
	
	function func(num) {
		return num * num; // élever au carré
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // deuxième div
	
	function func(num) {
		return num * num * num; // élever au cube
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Désormais, dans chacun des modules, nous pouvons utiliser n'importe quelles variables et fonctions, sans craindre qu'elles entrent en conflit avec d'autres variables et fonctions de notre script.

Par exemple, nous stockons les deux éléments dans la variable elem - chacun dans sa propre variable de son propre module. S'il n'y avait pas de modules ici, il aurait fallu introduire des variables différentes pour stocker nos éléments. Avec les modules, nous pouvons utiliser tranquillement notre variable, sans craindre que quelqu'un d'autre veuille également utiliser cette variable.