Aplikasi Praktikal

Katakan kita mempunyai dua div dengan nombor:

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

Mari kita atur supaya apabila klik pada div pertama, nilainya dikuasakan dua (diganda dengan sendiri), dan apabila klik pada div kedua - dikuasakan tiga (diganda tiga kali).

Mari susun kod kita dalam bentuk dua modul:

;(function() {
	let elem = document.querySelector('#div1'); // div pertama
	
	function func(num) {
		return num * num; // kuasa dua
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // div kedua
	
	function func(num) {
		return num * num * num; // kuasa tiga
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

Sekarang dalam setiap modul, kita boleh menggunakan sebarang pemboleh ubah dan fungsi, tanpa takut bahawa ia akan berkonflik dengan pemboleh ubah dan fungsi lain dalam skrip kita.

Sebagai contoh, kedua-dua elemen kita simpan dalam pemboleh ubah elem - setiap satu dalam pemboleh ubahnya sendiri dalam modulnya. Jika tiada modul di sini, kita terpaksa memperkenalkan pemboleh ubah yang berbeza untuk menyimpan elemen kita. Dengan modul, kita boleh menggunakan pemboleh ubah kita dengan tenang, tanpa takut bahawa seseorang lain akan mahu menggunakan pemboleh ubah ini juga.