RequireJS - ปลั๊กอิน

RequireJS มีปลั๊กอินชุดเล็ก ๆ ซึ่งอนุญาตให้โหลดทรัพยากรประเภทต่างๆเป็นการอ้างอิง ต่อไปนี้เป็นรายการปลั๊กอินที่มีอยู่ใน RequireJS -

• text
• domReady
• i18n
• กำลังโหลด CSS

ข้อความ

ข้อความ plug-in ที่ใช้สำหรับทรัพยากรตามข้อความในการโหลดแบบไม่พร้อมกันซึ่งส่วนใหญ่จะใช้สำหรับการแทรกเนื้อหา HTML ในไฟล์ JavaScript สามารถโหลดได้เมื่อคุณใช้ข้อความ! คำนำหน้าในการเรียกโมดูลที่ต้องการหรือกำหนดและส่งผ่านนามสกุลไฟล์ไปยังปลั๊กอิน เปรียบเทียบกับการโหลดโมดูลปกติปลั๊กอินข้อความจะโหลดโมดูลโดยใช้ XHR และจะไม่เพิ่มโค้ดลงในส่วนหัวเป็นscript แท็ก

ทรัพยากรไฟล์ข้อความสามารถรวมเป็นการอ้างอิงในรหัสเป็น -

require(["mymodule", "text!mymodule.html", "text!mymodule.css"],
   
   function(mymodule, html, css) {
      //the html and css variables will be the text
      //of the mymodule.html file and mymodule.css files respectively
   }
);

domReady

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

require(['domReady'], function(domReady) {
   
   domReady(function() {
      //the domReady function is called when DOM is ready 
      //which is safe to manipulate DOM nodes in this function
   });
});

i18n

สามารถใช้ได้กับหลายภาษาที่ให้ i18nรองรับบันเดิลซึ่งจะโหลดโดยอัตโนมัติเมื่อโมดูลหรือการอ้างอิงระบุ "i18n!" คำนำหน้า หากต้องการใช้สิ่งนี้ให้ดาวน์โหลดและวางไว้ในไดเร็กทอรีเดียวกับที่มีไฟล์ JavaScript หลักของคุณ วางปลั๊กอินนี้ในไดเร็กทอรีชื่อ "nls" เพื่อค้นหาไฟล์โลคัลไลเซชันของคุณ

ตัวอย่างเช่นสมมติว่าเรามีไฟล์ js หนึ่งไฟล์ชื่อcountry.js ที่มีเนื้อหาต่อไปนี้และวางไว้ในไดเร็กทอรีเป็นmydirectory / nls / country.js -

define({
   
   "root": {
      "india": "india",
      "australia": "australia",
      "england": "england"
   }
});

คุณสามารถเพิ่มการแปลเฉพาะลงในไฟล์ได้โดยใช้fr-fr locale และโค้ดด้านบนจะเปลี่ยนเป็น -

define({
   
   "root": {
      "title": "title",
      "header": "header",
      "description": "description"
   },
   
   "es-es": true
});

จากนั้นระบุไฟล์ที่mydirectory / nls / es-es / country.jsโดยมีเนื้อหาดังนี้ -

define({
   
   "root": {
      "title": "título",
      "header": "cabecera",
      "description": "descripción"
   },
   
   "es-es": true
});

คุณสามารถตั้งค่าโลแคลได้โดยส่งไปยังปลั๊กอินด้วยความช่วยเหลือของโมดูล config ในไฟล์main.jsดังที่แสดงด้านล่าง -

requirejs.config({
   
   config: {
      //set the config for the i18n plugin
      
      i18n: {
         locale: 'es-es'
      }
      
   }
});

โหลด CSS โดยใช้ RequireJS

คุณสามารถใช้ปลั๊กอินบางตัวเพื่อโหลดไฟล์ CSS โดยต่อท้ายลิงก์ส่วนหัวเพื่อโหลดไฟล์ CSS

คุณสามารถโหลด CSS ได้โดยใช้ฟังก์ชันของคุณเองดังที่แสดงด้านล่าง -

function myCss(url) {
   var mylink = document.createElement("mylink");
   mylink.type = "text/css";
   mylink.rel = "stylesheet";
   mylink.href = url;
   document.getElementsByTagName("head")[0].appendChild(mylink);
}