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

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

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

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

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

javascript;(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 - แต่ละอันในตัวแปรของตัวเองใน โมดูลของมันเอง หากไม่มีโมดูลที่นี่ เราก็ต้อง กำหนดตัวแปรที่แตกต่างกันเพื่อเก็บ องค์ประกอบของเรา แต่เมื่อมีโมดูล เราสามารถใช้ ตัวแปรของเราได้อย่างสบายใจ โดยไม่ต้องกลัวว่า จะมีใครอยากใช้ตัวแปรนี้เช่นกัน