requirejsНачало работы с requirejs
замечания
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 с вложенными зависимостями
Следующий пример расширяет 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" } }; });
Включение библиотек без AMD
Не все библиотеки определены таким образом, который совместим с функцией 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")) );
});
