RequireJS - Плагины
RequireJS содержит небольшой набор плагинов, которые позволяют загружать различные типы ресурсов в виде зависимостей. Ниже приведен список доступных плагинов в RequireJS -
- text
- domReady
- i18n
- Загрузка CSS
текст
Текст плагин используется для загрузки текстовых ресурсов на основе асинхронно , который в основном используется для вставки содержимого HTML в файлах JavaScript. Его можно загрузить при использовании текста! префикс в любом вызове модуля require или define и передать расширение файла плагину. По сравнению с обычной загрузкой модуля текстовый плагин загружает модули с использованием 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, и приведенный выше код изменится как -
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
});
Вы можете установить языковой стандарт, передав его плагину с помощью конфигурации модуля в файле 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);
}