การประยุกต์ใช้งานจริง

สมมติว่าเรามี div สองอันที่มีตัวเลข:

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

มาทำให้เมื่อคลิกที่ div แรก ค่าของมันจะถูกยกกำลังสอง และเมื่อคลิกที่ div ที่สอง - ยกกำลังสาม

มาจัดระเบียบโค้ดของเราเป็นสองโมดูล:

;(function() {
	let elem = document.querySelector('#div1'); // div แรก
	
	function func(num) {
		return num * num; // ยกกำลังสอง
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // div ที่สอง
	
	function func(num) {
		return num * num * num; // ยกกำลังสาม
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

ตอนนี้ในแต่ละโมดูลเราสามารถใช้ ตัวแปรและฟังก์ชันใดๆ โดยไม่ต้องกลัวว่า พวกมันจะขัดแย้งกับตัวแปรอื่นๆ และฟังก์ชันอื่นๆ ในสคริปต์ของเรา

ตัวอย่างเช่น เราเก็บองค์ประกอบทั้งสองในตัวแปร elem - แต่ละอันในตัวแปรของตัวเองใน โมดูลของมันเอง หากไม่มีโมดูลที่นี่ เราก็ต้อง กำหนดตัวแปรที่แตกต่างกันเพื่อเก็บ องค์ประกอบของเรา แต่เมื่อมีโมดูล เราสามารถใช้ ตัวแปรของเราได้อย่างสบายใจ โดยไม่ต้องกลัวว่า จะมีใครอยากใช้ตัวแปรนี้เช่นกัน