RequireJS - Eklentiler

RequireJS, çeşitli kaynak türlerinin bağımlılıklar olarak yüklenmesine izin veren küçük bir eklenti seti içerir. Aşağıda, RequireJS'deki mevcut eklentilerin bir listesi verilmiştir -

• text
• domReady
• i18n
• CSS yükleme

Metin

Metin eklentisi ağırlıklı JavaScript dosyalarında HTML içeriği eklemek için kullanılır uyumsuz yükleme metin tabanlı kaynaklar için kullanılır. Metni kullandığınızda yüklenebilir ! modül çağrısı gerektirir veya tanımlayın ve dosya uzantısını eklentiye iletin. Normal modül yüklemesiyle karşılaştırıldığında, metin eklentisi XHR kullanarak modülleri yükler ve kodu başlığa birscript etiket.

Metin dosyası kaynağı, koda bağımlılık olarak dahil edilebilir -

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 hazır olmadan önce komut dosyalarını yüklemek için kullanılabilir ve geliştiriciler, yalnızca komut dosyaları tamamen yüklendiğinde DOM ile etkileşime girebilir. Bazen komut dosyaları DOM hazır olmadan yüklenebilir. Dolayısıyla, bu sorunun üstesinden gelmek için RequireJS, DOM hazır olduğunda domReady işlevini çağıran DOMContentLoaded olayı adı verilen modern bir yaklaşım sağlar .

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

Sağlayan birden çok yerel ayarla kullanılabilir i18nbir modül veya bağımlılık "i18n!" belirttiğinde otomatik olarak yüklenecek olan paket desteği önek. Bundan yararlanmak için, indirin ve ana JavaScript dosyanızın bulunduğu dizine koyun. Yerelleştirme dosyalarınızı bulmak için bu eklentiyi "nls" adlı dizine yerleştirin.

Örneğin , aşağıdaki içeriğe sahip country.js adında bir js dosyamız olduğunu varsayın ve bunu dizine mydirectory / nls / country.js olarak yerleştirin -

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

Fr-fr yerel ayarını kullanarak bir dosyaya belirli bir çeviri ekleyebilirsiniz ve yukarıdaki kod şu şekilde değişecektir:

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

Ardından, aşağıdaki içeriğe sahip dosyayı mydirectory / nls / es-es / country.js'de belirtin -

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

Yerel ayarı, aşağıda gösterildiği gibi main.js dosyasındaki modül yapılandırması yardımıyla eklentiye ileterek ayarlayabilirsiniz -

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

RequireJS kullanarak CSS yükleme

CSS dosyasını yüklemek için sadece başlık bağlantısına ekleyerek CSS dosyasını yüklemek için bazı eklentileri kullanabilirsiniz.

CSS, aşağıda gösterildiği gibi kendi işlevinizi kullanarak yüklenebilir -

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