RequireJS - โมดูล AMD

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

การกำหนดโมดูล

โมดูลถูกกำหนดโดยใช้ define()ฟังก์ชัน; ฟังก์ชันเดียวกันนี้ใช้สำหรับโหลดโมดูลด้วย

ชื่อง่าย / คู่ค่า

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

define({
   state: "karnataka",
   city: "bangalore"
});

การกำหนดฟังก์ชัน

โมดูลยังสามารถใช้ฟังก์ชันสำหรับเฟรมเวิร์กได้โดยไม่ต้องพึ่งพา ซึ่งสามารถทำได้โดยใช้ไวยากรณ์ต่อไปนี้ -

define(function () {
   
   //Do setup work here
   return {
      state: "karnataka",
      city: "bangalore"
   }
});

การกำหนดฟังก์ชันด้วยการอ้างอิง

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

define(["./mnc", "./startup"], 
   function(mnc, startup) {
        
      return {
         state: "karnataka",
         city: "bangalore",
      
         addCompany: function() {
            mnc.decrement(this);
            startup.add(this);
         }
      
      }
   }
);

การกำหนดโมดูลเป็นฟังก์ชัน

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

define(["./mnc", "./startup"],
   function(mnc, startup) {
       
      return function(title) {
         return title ? (window.title = title) :
         startup.storeName + ' ' + mnc.name;
      }
      
   }
);

การกำหนดโมดูลด้วยชื่อ

ในบางกรณีคุณอาจต้องใส่ชื่อโมดูลเป็นอาร์กิวเมนต์แรก define(). ซึ่งสามารถทำได้โดยใช้ไวยากรณ์ต่อไปนี้ -

define("js2/title",
   ["js1/mnc", "js1/startup"],
   
   function(mnc, startup) {
      //Define js2/title object in here.
   }
   
);

กำลังโหลดโมดูล