RequireJS — Обзор
RequireJS — это библиотека JavaScript и загрузчик файлов, которая управляет зависимостями между файлами JavaScript и в модульном программировании. Это также помогает улучшить скорость и качество кода.
RequireJS был разработан Дэвидом Марком, и его первоначальная версия v1.0.0 была выпущена в 2009 году. Это открытый исходный код, а версия 2.3.3 — это его последний стабильный выпуск.
Зачем использовать RequireJS?
-
Это библиотека JavaScript с открытым исходным кодом под лицензией MIT.
-
Обеспечивает асинхронную загрузку модуля.
-
Он имеет возможность загружать вложенные зависимости.
-
Если у вас много маленьких файлов, вам не нужно беспокоиться о том, чтобы отслеживать порядок зависимостей.
-
Он обеспечивает поддержку плагинов и загружает более одного файла JavaScript.
Это библиотека JavaScript с открытым исходным кодом под лицензией MIT.
Обеспечивает асинхронную загрузку модуля.
Он имеет возможность загружать вложенные зависимости.
Если у вас много маленьких файлов, вам не нужно беспокоиться о том, чтобы отслеживать порядок зависимостей.
Он обеспечивает поддержку плагинов и загружает более одного файла JavaScript.
Особенности RequireJS
-
Он управляет зависимостями между файлами JavaScript и повышает скорость и качество кода.
-
Он объединяет и минимизирует модули в один скрипт для оптимизации работы.
-
Это уменьшает сложность кода в больших приложениях.
-
Он собирает разные файлы JavaScript из разных модулей во время компиляции.
-
Это позволяет легко отлаживать, так как загружает файлы из простых тегов скрипта.
Он управляет зависимостями между файлами JavaScript и повышает скорость и качество кода.
Он объединяет и минимизирует модули в один скрипт для оптимизации работы.
Это уменьшает сложность кода в больших приложениях.
Он собирает разные файлы JavaScript из разных модулей во время компиляции.
Это позволяет легко отлаживать, так как загружает файлы из простых тегов скрипта.
RequireJS — Настройка среды
В этой главе мы поймем, как настроить среду для RequireJS. Для этого вам необходимо скачать последнюю версию библиотеки RequireJS. Вы можете скачать либо уменьшенную версию, либо подробную версию .
После загрузки нам нужно включить файл require.js в вашу папку libs, и структура вашего проекта должна быть такой, как показано ниже —
projectname/ |--index.html |--libs/ |---main.js |---require.js |---helper/ |----util.js
Нам нужно определить html-файл как index.html, куда будет загружен RequireJS, как показано ниже.
<html> <head> <script data-main = "libs/main" src = "libs/require.js"></script> </head> <body> <h1> RequireJS Sample Page </h1> </body> </html>
Обратите внимание, что для загрузки скрипта в тег script включается только файл require.js с вызовом RequireJS.
RequireJS в узле
Есть два способа получить адаптер Node.
-
npm — вы можете установить последнюю версию requirejs из командной строки, как показано ниже.
npm — вы можете установить последнюю версию requirejs из командной строки, как показано ниже.
npm install requirejs
-
Загрузить r.js — Вы можете скачать файл r.js со страницы загрузки, а источник — со страницы репозитория r.js.
Загрузить r.js — Вы можете скачать файл r.js со страницы загрузки, а источник — со страницы репозитория r.js.
RequireJS — Конфигурация
RequireJS можно инициализировать, передав основную конфигурацию в шаблоне HTML через атрибут data-main . Он используется RequireJS, чтобы знать, какой модуль загрузить в ваше приложение.
Например —
<scripts data-main = "scripts/main" src = "scripts/require.js"></script>
Чтобы включить файл Require.js, вам нужно добавить тег script в html-файл. Внутри тега script добавьте атрибут data-main для загрузки модуля. Это может быть принято как основная точка входа в ваше приложение. Scripts / main — это основной файл JavaScript приложения, который содержит конфигурацию RequireJS.
Параметры конфигурации
Ниже приведены параметры конфигурации, которые можно установить при загрузке первого модуля приложения.
-
baseUrl — это путь маршрута для всех модулей, которые загружаются через RequireJS. BaseUrl обозначается строкой, начинающейся с «slash (/)», содержащей протокол и заканчивающейся расширением «.js». Если не указан baseUrl, то RequireJS использует путь атрибута main-data как baseUrl.
-
paths — определяет пути для модулей, относящихся к baseUrl. Он автоматически добавляет расширение .js к пути при отображении имени модуля.
-
shim — Он обеспечивает использование библиотек не AMD с RequireJS, настраивая их зависимости и экспортируя их глобальные значения.
-
карта — Для данного модуля приложение использует один и тот же модуль разных версий для разных целей, предоставляя свои идентификаторы для использования одного и того же кода для разных условий.
-
config — Он предоставляет конфигурацию для модуля с помощью опции config, и это можно сделать с помощью специальной зависимости «module» и вызова его функции module.config () .
-
urlArgs — Аргументы строки запроса используются для извлечения всех ресурсов, которые загружаются с помощью RequireJS. Он используется для очистки кэша при неправильной настройке браузера или сервера.
-
waitSeconds — указывает количество секунд ожидания, прежде чем выкинуть загрузку скрипта. По умолчанию установлено значение «7» секунд, а «0» отключает тайм-аут.
-
пакеты — предоставляет пакеты CommonJS для настройки модулей загрузки.
-
context — предоставляет имя для загрузки контекста, которая позволяет загружать различные модули на странице.
-
deps — это массив зависимостей, который требуется, когда Require указан как объект конфигурации перед загрузкой RequireJS.
-
обратный вызов — он выполняет функцию после загрузки зависимостей и требуется, когда Require указан как объект конфигурации перед загрузкой RequireJS.
-
xhtml — используется для создания элементов сценария с помощью метода document.createElementNS (), когда для этого параметра установлено значение true .
-
scriptType — определяет значение атрибута типа сценария, используемого в документе. Тип по умолчанию «текст / JavaScript».
-
skipDataMain — пропускает сканирование основного атрибута данных при загрузке модуля, если для этого параметра установлено значение true .
baseUrl — это путь маршрута для всех модулей, которые загружаются через RequireJS. BaseUrl обозначается строкой, начинающейся с «slash (/)», содержащей протокол и заканчивающейся расширением «.js». Если не указан baseUrl, то RequireJS использует путь атрибута main-data как baseUrl.
paths — определяет пути для модулей, относящихся к baseUrl. Он автоматически добавляет расширение .js к пути при отображении имени модуля.
shim — Он обеспечивает использование библиотек не AMD с RequireJS, настраивая их зависимости и экспортируя их глобальные значения.
карта — Для данного модуля приложение использует один и тот же модуль разных версий для разных целей, предоставляя свои идентификаторы для использования одного и того же кода для разных условий.
config — Он предоставляет конфигурацию для модуля с помощью опции config, и это можно сделать с помощью специальной зависимости «module» и вызова его функции module.config () .
urlArgs — Аргументы строки запроса используются для извлечения всех ресурсов, которые загружаются с помощью RequireJS. Он используется для очистки кэша при неправильной настройке браузера или сервера.
waitSeconds — указывает количество секунд ожидания, прежде чем выкинуть загрузку скрипта. По умолчанию установлено значение «7» секунд, а «0» отключает тайм-аут.
пакеты — предоставляет пакеты CommonJS для настройки модулей загрузки.
context — предоставляет имя для загрузки контекста, которая позволяет загружать различные модули на странице.
deps — это массив зависимостей, который требуется, когда Require указан как объект конфигурации перед загрузкой RequireJS.
обратный вызов — он выполняет функцию после загрузки зависимостей и требуется, когда Require указан как объект конфигурации перед загрузкой RequireJS.
xhtml — используется для создания элементов сценария с помощью метода document.createElementNS (), когда для этого параметра установлено значение true .
scriptType — определяет значение атрибута типа сценария, используемого в документе. Тип по умолчанию «текст / JavaScript».
skipDataMain — пропускает сканирование основного атрибута данных при загрузке модуля, если для этого параметра установлено значение true .
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("js2/title",
["js1/mnc", "js1/startup"],
function(mnc, startup) {
//Define js2/title object in here.
}
);
RequireJS — Определение функции
Функция define () может использоваться для загрузки модулей (модуль может быть объектом, функцией, классом или кодом, который выполняется после загрузки модуля). Вы можете загрузить разные версии одного и того же модуля на одной странице. Различные версии могут быть проанализированы в одном и том же порядке, даже если они загружены в другом порядке.
Синтаксис
define(['module1', 'module2'], function (module1, module2) {
//define the module value by returning a value
return function () {};
});
Вы можете передать список имен модулей, когда определяете модуль, и RequireJS может использоваться для извлечения этих модулей перед выполнением модуля. Эти модули могут быть переданы в качестве параметров функции определения .
пример
В следующем примере показано использование функции define () при загрузке модулей. Создайте HTML-файл с именем index.html и поместите в него следующий код:
<!DOCTYPE html>
<html>
<head>
<title>Define() Function</title>
<script data-main = "main" src = "require.js"></script>
</head>
<body>
<h2>RequireJS Define() Function Example</h2>
</body>
</html>
Создайте файл js с именем main.js и добавьте в него следующий код:
define(function (require) {
var myteam = require("./team");
var mylogger = require("./player");
alert("Player Name : " + myteam.player);
mylogger.myfunc();
});
Теперь создайте еще два js- файла с именами team.js и player.js и разместите следующий код соответственно:
team.js
define({
player: "Sachin Tendulkar",
team : "India"
});
player.js
define(function (require) {
var myteam = require("./team");
return {
myfunc: function () {
document.write("Name: " + myteam.player + ", Country: " + myteam.team);
}
};
});
Выход
Откройте файл HTML в браузере; вы получите вывод как на следующем скриншоте —
Нажмите на кнопку «ОК», вы получите еще один вывод из модулей —
RequireJS — Оптимизатор
В этой главе мы обсудим оптимизацию в RequireJS. Оптимизатор в RequireJS имеет следующие характеристики:
-
Объединяет файлы сценариев вместе с помощью UglifyJS для использования по умолчанию или Closure Compiler для использования Java
-
Объединяет CSS файлы вместе.
Объединяет файлы сценариев вместе с помощью UglifyJS для использования по умолчанию или Closure Compiler для использования Java
Объединяет CSS файлы вместе.
Оптимизатор является компонентом адаптера r.js для Node и Nashorn . Он разработан, чтобы быть частью процесса сборки, а не для процесса разработки.
пример
После загрузки файла r.js в папку вашего проекта структура папки должна выглядеть следующим образом:
projectfolder/
|-->index.html
|-->CSS/
|--->main.css
|--->other.css
|-->libs
|--->require.js
|--->main.js
|--->dependent1.js
|--->dependent2.js
|--->dependent3.js
Ваш HTML-файл будет выглядеть так, как показано ниже —
<html>
<head>
<script data-main = "libs/main" src = "libs/require.js"></script>
</head>
<body>
<h1> RequireJS Sample Page </h1>
</body>
</html>
Ваш файл main.js будет выглядеть так, как показано ниже —
require(["dependent1", "dependent2", "dependent3"], function (dependent1, dependent2,
dependent3) {
});
Ваш файл main.css будет выглядеть так, как показано ниже —
@import url("other.css");
.app {
background: transparent url(../../img/app.png);
}
Базовая настройка оптимизатора
Вы можете использовать аргументы командной строки или свойства построения профиля для настройки проекта, оба они взаимозаменяемы.
Ниже приведен синтаксис командной строки:
node r.js -o baseUrl = . paths.jquery = content/path/jquery name = main out = main-built.js
Ниже приводится синтаксис для построения профиля —
({
baseUrl: ".",
paths: {
jquery: "content/path/jquery"
},
name: "main",
out: "main-built.js"
})
После этого вы можете передать имя профиля сборки оптимизатору в командной строке, как показано ниже —
node r.js -o build.js
Есть некоторые недостатки в синтаксисе аргумента командной строки. Совместное использование аргументов командной строки или свойств построения профиля может преодолеть эти недостатки.
Оптимизация одного файла JS
Чтобы оптимизировать один JS-файл, вам необходимо создать JS-файл, содержащий содержимое всех его зависимостей. Ваш файл должен выглядеть так, как указано ниже —
({
baseUrl: "js/shop",
paths: {
"jquery": "jquery",
"backbone": "backbone",
"underscore": "underscore"
},
shim: {
"backbone": {
"department": ["underscore", "jquery"],
"dependent": "Backbone"
},
"underscore": {
exports: "_"
}
},
name: "../main",
out: "../built/js/main.js"
})
Теперь вы можете создать файл main.js, в котором есть все зависимости для приложения. Этот файл используется в HTML-файле для загрузки всех файлов JS одним запросом. Обратите внимание, что созданные файлы не должны находиться там в каталоге исходного кода; файлы должны быть в копии проекта.
Использование ресурсов CDN
Оптимизатор не загружает сценарии с использованием сетевых ресурсов / CDN (Content Delivery Network). В случае, если сценарии необходимо загрузить с использованием CDN, необходимо сопоставить эти файлы с именем модуля и загрузить файлы в локальный путь к файлу. Вы можете использовать специальное слово «empty» в конфигурации пути профиля сборки, как показано в следующем синтаксисе:
({
baseUrl: "js",
name: "mainCDN",
out: "js/mainCDN-built.js",
paths: {
jquery: "empty:"
}
})
Основной файл будет выглядеть так, как показано ниже —
requirejs.config({
paths: {
'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
}
});
require(['jquery'], function ($) {
});
Оптимизация одного CSS-файла
CSS-файлы оптимизируются с использованием следующих параметров непосредственно в командной строке, как показано ниже:
node ../../r.js -o cssIn = main.css out = main-built.css
CSS-файлы также могут быть оптимизированы в файле сборки, используя те же свойства, как показано ниже —
... cssIn:"main.css", out:"main-built.css" ...
Оба вышеуказанных метода разрешены и создадут файл с именем projectfolder / css / mainbuild.css . В этом файле будет правильно настроено содержимое файла main.css, пути url () и удалены комментарии.
Оптимизация всего проекта
Оптимизатор использует профиль сборки для оптимизации всех файлов css и js . В следующем примере создается файл build.js .
({
baseUrl: "js/shop",
appDir: '.',
paths: {
"jquery": "jquery",
"backbone": "backbone",
"underscore": "underscore"
},
shim: {
"backbone": {
"deps": ["underscore", "jquery"],
"exports": "Backbone"
},
"underscore": {
exports: "_"
}
},
optimizeCss: "standard.keepLines",
modules: [
{
name: "app"
}
],
dir: "../built"
})
Файл build.js указывает RequireJS скопировать все папки приложения (параметр appDir) в созданную выходную папку (параметр dir) и применить все оптимизации к файлам, расположенным в выходной папке. Выполните следующую команду, чтобы создать профиль в папке приложения:
node r.js -o build.js
RequireJS — jQuery
RequireJS использует jQuery в качестве другой зависимости и регистрируется как именованный модуль jquery в нижнем регистре и по умолчанию также регистрирует себя с помощью глобальных функций $ и jQuery при использовании AMD / RequireJS.
Загрузка jQuery
require(['jquery'], function($) {
//code here
}
Вы можете загрузить несколько пользовательских библиотек вместе с jQuery, как показано ниже —
require(['custom_library_path',jquery'], function(load_library,$) {
//related code of $ and load_library
});
В следующей таблице показано использование jQuery с RequireJS для определения их зависимостей.
| Sr.No. | Типы и описание |
|---|---|
| 1 | Использование Shim Config
jQuery использует конфигурацию shim для определения зависимостей для плагинов jQuery. |
| 2 | Загрузка jQuery из CDN
jQuery использует CDN для определения зависимостей для плагинов jQuery. |
jQuery использует конфигурацию shim для определения зависимостей для плагинов jQuery.
jQuery использует CDN для определения зависимостей для плагинов jQuery.
RequireJS — NodeJS
Адаптер Node можно использовать вместе с реализацией Require и пути поиска Node. Если для RequireJS не используется конфигурация модулей, вы можете использовать существующие модули на основе Node, не меняя их. Вы можете установить пакеты узлов в каталоге node_modules проекта с помощью команды npm.
Узел будет загружать модули только с локального диска, а параметры конфигурации, такие как карта, пакеты, пути и т. Д., Будут применяться только тогда, когда модуль загружен RequireJS.
Установка узла
Вы можете установить адаптер Node с помощью следующей команды, которая установит последние версии файлов —
npm install requirejs
Вы также можете установить Node следующими способами:
-
Вы можете скачать r.js по этой ссылке и сохранить его в папке вашего проекта.
-
Получите исходный код из репозитория r.js или установите его через узел dist.js.
Вы можете скачать r.js по этой ссылке и сохранить его в папке вашего проекта.
Получите исходный код из репозитория r.js или установите его через узел dist.js.
Использование узла
Чтобы использовать узел, вам нужно иметь require (‘requirejs’) и переместить функцию require в конфигурации в файл main.js верхнего уровня.
Например —
var requirejs = require('requirejs');
requirejs.config({
//load the mode modules to top level JS file
//by passing the top level main.js require function to requirejs
nodeRequire: require
});
requirejs(['name1', 'name2'],
function (name1, name2) {
//by using requirejs config, name1 and name2 are loaded
//node's require loads the module, if they did not find these
}
);
Сборка узловых модулей с AMD или RequireJS
Вы можете заставить модуль кода работать с RequireJS и Node, не требуя пользователей библиотеки, а затем использовать пакет amdefine для выполнения этой работы.
Например —
if (typeof define !== 'function') {
var define = require('amdefine')(module);
}
define(function(require) {
var myval = require('dependency');
//The returned value from the function can be used
//as module which is visible to Node.
return function () {};
});
Оптимизатор как узловой модуль
Модуль Node использует оптимизатор RequireJS в качестве метода оптимизации , используя вызов функции вместо инструмента командной строки.
Например —
var requirejs = require('requirejs');
var config = {
baseUrl: '../directory/scripts',
name: 'main',
out: '../build/main-built.js'
};
requirejs.optimize(config, function (buildResponse) {
//The text output of the modules specify by using buildResponse
//and loads the built file for the contents
//get the optimized file contents by using config.out
var contents = fs.readFileSync(config.out, 'utf8');
}, function(err) {
//code for optimization err callback
});
RequireJS — Dojo
Dojo — это инструментарий JavaScript, который основан на модульной архитектуре AMD, которая предоставляет дополнительные модули для добавления дополнительных функций в веб-приложение, а также экономит время и масштаб в процессе разработки веб-приложений.
пример
В следующем примере показано использование Dojo вместе с RequireJS. Создайте HTML-файл с именем index.html и поместите в него следующий код:
<!DOCTYPE html>
<html>
<head>
<title>RequireJS Dojo</title>
<script data-main="app" src="lib/require.js"></script>
</head>
<body>
<h2>RequireJS Dojo</h2>
<p>
Hello... ...
</p>
</body>
</html>
Создайте файл js с именем app.js и добавьте в него следующий код:
require ({
//You can configure loading modules from the lib directory
baseUrl: 'lib',
paths: {
//mapping of package
dojo: 'http://sfoster.dojotoolkit.org/dojobox/1.7-branch/dojo'
}
}, [
//modules which we are using here
'dojo/dom'
], function(dom) {
//using the 'byId' method from dom module
var mydojo = dom.byId('dojo_val')
mydojo.innerHTML = "The text is displaying via dojo/dom";
}
);
Выход
Откройте файл HTML в браузере; вы получите следующий вывод —
RequireJS — CommonJS
Формат модуля определяется CommonJS. Он определяется без предоставления одинаковой опции браузеров для других сред JavaScript. Поэтому в спецификации CommonJS рекомендуются транспортные форматы и асинхронные требования . Вы можете легко преобразовать традиционный формат модуля CommonJS для работы с RequireJS. Но все модули не будут преобразованы в новый формат. Некоторые из исключений перечислены ниже —
- Модули с условным кодом для вызова по требованию.
- Модули с круговыми зависимостями.
Ручное преобразование
Модули CommonJS можно преобразовать вручную в формат RequireJS, используя следующий синтаксис:
define(function(require, exports, module) {
//place CommonJS module content here
});
Инструмент преобразования
Модули CommonJS можно преобразовать в формат RequireJS с помощью средства преобразования проекта r.js , встроенного в файл r.js. Вы должны указать путь к файлу, который нужно преобразовать, и выходную папку, как показано ниже —
node r.js -convert path/to/commonjs/modules/ path/to/output
Установка экспортируемого значения
Некоторые системы в CommonJS позволяют устанавливать экспортируемое значение, назначая экспортируемое значение как module.exports. Но RequireJS поддерживает более простой способ возврата значения из функции, переданной для определения. Преимущество этого в том, что вам не нужны аргументы export и функции модуля, поэтому вы можете оставить их вне определения модуля, как показано ниже —
define(function (require) {
var name = require('name');
//Define the module as exporting a function
return function () {
name.doSomething();
};
});
Альтернативный синтаксис
Альтернативный способ указать зависимости — через аргумент массива зависимостей define () . Но порядок имен в массиве зависимостей должен соответствовать порядку аргументов, передаваемых функции определения define (), как показано ниже —
define(['name'], function (name) {
return function () {
name.doSomething();
};
});
Загрузка модулей из пакетов CommonJS
Чтобы узнать о местоположении и атрибутах пакетов, модули загружаются в пакеты CommonJS с помощью RequireJS путем настройки конфигурации RequireJS.
Инструмент оптимизации
В RequireJS имеется инструмент оптимизации, который может объединять определения модулей в оптимизированные пакеты для доставки в браузер. Он работает как инструмент командной строки, так что вы можете использовать его как часть развертывания кода.
RequireJS — Плагины
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 может быть загружен с помощью вашей собственной функции, как показано ниже —