Учебники

RequireJS — Плагины

Август 8, 2018

RequireJS содержит небольшой набор плагинов, которые позволяют загружать различные типы ресурсов в качестве зависимостей. Ниже приведен список доступных плагинов в RequireJS —

  • текст
  • domReady
  • i18n
  • Загрузка CSS

текст

Текстовый плагин используется для асинхронной загрузки текстовых ресурсов, который в основном используется для вставки HTML-содержимого в файлы JavaScript. Он может быть загружен при использовании текста! префикс в любом требовании или определить вызов модуля и передать расширение файла в плагин. По сравнению с обычной загрузкой модулей, текстовый плагин загружает модули, используя XHR, и не добавляет код в заголовок в качестве тега скрипта .

Ресурс текстового файла может быть включен в код как зависимость как: 

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, и приведенный выше код будет изменен как — 

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 может быть загружен с помощью вашей собственной функции, как показано ниже —

47
Share: