Ứng dụng thực tế

Giả sử chúng ta có hai phần tử div với các số:

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

Hãy làm sao để khi click vào phần tử div đầu tiên, giá trị của nó được bình phương lên, còn khi click vào phần tử div thứ hai - được lập phương lên.

Chúng ta sẽ tổ chức mã của mình dưới dạng hai mô-đun:

;(function() {
	let elem = document.querySelector('#div1'); // phần tử div đầu tiên
	
	function func(num) {
		return num * num; // bình phương
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // phần tử div thứ hai
	
	function func(num) {
		return num * num * num; // lập phương
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Bây giờ trong mỗi mô-đun, chúng ta có thể sử dụng bất kỳ biến và hàm nào, mà không sợ rằng chúng sẽ xung đột với các biến và hàm khác trong tập lệnh của chúng ta.

Ví dụ, cả hai phần tử chúng ta lưu trữ trong biến elem - mỗi phần tử trong biến riêng của mô-đun của nó. Nếu không có mô-đun ở đây, chúng ta sẽ buộc phải giới thiệu các biến khác nhau để lưu trữ các phần tử của chúng ta. Còn với các mô-đun, chúng ta có thể sử dụng thoải mái biến của mình, mà không sợ rằng ai đó cũng muốn sử dụng biến này.