RequireJS - это реализация API асинхронного модуля (AMD), который используется для загрузки файлов javascript асинхронно (т.е. без блокировки) и управления зависимостями между несколькими файлами javascript. Он также включает инструмент оптимизации для объединения и минимизации файлов сценариев для развертывания, позволяя разработчику поддерживать логически отдельный код.
В следующем примере будет продемонстрирована базовая установка и настройка RequireJS.
Создайте новый HTML-файл с именем index.html
и вставьте следующий контент:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello RequireJS</title>
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
<!-- place content here --->
<script>
requirejs(["scripts/say"], function(say) {
alert(say.hello());
});
</script>
</body>
Создайте новый JS-файл в scripts/say.js
и вставьте следующий контент:
define([], function(){
return {
hello: function(){
return "Hello World";
}
};
});
Структура проекта должна выглядеть так:
- project
- index.html
- scripts
- say.js
Откройте файл index.html
в браузере, и он предупредит вас «Hello World».
Загрузите файл сценария require.js.
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
Загрузите модуль say
асинхронно из папки scripts
. (Обратите внимание, что вам не нужно расширение .js
при обращении к модулю.) Возвращаемый модуль затем передается в предоставленную функцию, где вызывается hello()
.
<script>
requirejs(["scripts/say"], function(say) {
alert(say.hello());
});
</script>
Модуль say
возвращает один объект с определенной функцией hello
.
define([], function(){
return {
hello: function(){
return "Hello World";
}
};
});
Следующий пример расширяет Hello World
, демонстрируя несколько зависимостей с помощью функции define()
.
Создайте новый HTML-файл с именем index.html
и вставьте следующий контент:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello RequireJS</title>
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
</head>
<body>
<!-- place content here --->
<script>
requirejs(["scripts/say"], function(say) {
console.log(say.hello("english"));
console.log(say.hello("spanish"));
console.log(say.hello("french"));
});
</script>
</body>
Создайте новый JS-файл в scripts/say.js
и вставьте следующий контент:
define(["scripts/translations"], function(translations){
return {
hello: function(language){
return translations[language].hello + " " + translations[language].world;
}
};
});
Создайте новый JS-файл в scripts/translations.js
и вставьте следующий контент:
define([], function(){
return {
"english": {
hello: "Hello",
world: "World"
},
"spanish": {
hello: "Hola",
world: "Mundo"
},
"french": {
hello: "Bonjour",
world: "Le Monde"
}
};
});
Структура проекта должна выглядеть так:
- project
- index.html
- scripts
- say.js
- translations.js
Откройте файл index.html
в браузере, и консоль выведет:
Hello World
Hola Mundo
Bonjour Le Monde
Загрузите файл сценария require.js.
<script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
Загрузите модуль say
асинхронно из папки scripts
. (Обратите внимание, что вам не нужно расширение .js
при обращении к модулю.) Возвращаемый модуль затем передается в предоставленную функцию, где вызывается hello()
.
<script>
requirejs(["scripts/say"], function(say) {
console.log(say.hello("english"));
console.log(say.hello("spanish"));
console.log(say.hello("french"));
});
</script>
Модуль say
возвращает один объект с определенной функцией hello
, но в этом случае мы определили зависимость ( scripts/translations
), и мы будем тянуть переводы оттуда.
define(["scripts/translations"], function(translations){
return {
hello: function(language){
return translations[language].hello + " " + translations[language].world;
}
};
});
Модуль translations
просто возвращает объект с различными переводами слов.
define([], function(){
return {
"english": {
hello: "Hello",
world: "World"
},
"spanish": {
hello: "Hola",
world: "Mundo"
},
"french": {
hello: "Bonjour",
world: "Le Monde"
}
};
});
Не все библиотеки определены таким образом, который совместим с функцией define()
AMD и RequireJS. Автор обратился к этому, включив директиву shim
для настройки этих зависимостей.
Одним из примеров является использование плагина jQuery UI Layout. Этот плагин зависит от jQuery. Вы можете настроить его следующим образом:
requirejs.config({
paths: {
'jquery': '../path/to/jquery.min',
'jquery.layout': '../path/to/jquery.layout.min'
},
shim: {
'jquery.layout': {
deps: ['jquery']
}
}
});
А затем используйте его в модуле компоновки следующим образом:
define(['jquery', 'jquery.layout'], function ($, layout) {
$('body').layout();
});
Единственная точка входа в ваше приложение возможна с RequireJS, используя data-main
базу data-main
отнесенную к тегу <script>
.
<script type="text/javascript" data-main="scripts/main" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script>
При загрузке RequireJS будет искать атрибут data-main
и вставить основной тег скрипта в DOM с помощью набора атрибутов async
. Именно этот файл вам нужно будет выполнить любую конфигурацию, прежде чем начинать свое приложение.
Например:
// contents of scripts/main.js
require.config({
waitSeconds: 10,
paths: {
jquery: 'libs/jquery-1.4.2.min'
}
});
requirejs(["jquery", "libs/say"], function($, say) {
var $body = $('body');
$body.append( $('<p/>').text(say.hello("english")) );
$body.append( $('<p/>').text(say.hello("spanish")) );
$body.append( $('<p/>').text(say.hello("french")) );
});