Модульный подход разработки с использованием JavaScript: AMD и RequireJS

Формат AMD (Asynchronous Module Definition)

В основе формата AMD (Asynchronous Module Definition) лежат две функции:

define() для определения именованных или безымянных модулей и
require() для импорта зависимостей.

Функция define() имеет следующий синтаксис:

define(

module_id // необязательный

[dependencies] // необязательный

function // функционал модуля

);

Параметр module_id необязательный, он обычно требуется только при использовании не-AMD инструментов объединения. Когда этот аргумент опущен, модуль называется анонимным (использование неназванных модулей предпочтительнее). Вы можете сами назвать модули явно, но это делает модули менее переносимыми - если вы переместите файл в другой каталог, вам нужно будет изменить имя.

Параметр dependencies представляет собой массив зависимостей (файлов), которые требуются определяемому модулю, а третий аргумент (definition function) — это функция, которая выполняется для создания экземпляра модуля.

Пример модуля:

define(

"myModule", // идентификатор модуля

["foo", "bar"], // именования подключаемых файлов (зависимостей)

function(foo, bar) { // зависимости (foo и bar) передаются в функцию

// создаем модуль (некий функционал)

var myModule = {

doStuff: function() {

console.log("Hi!");

}

};

return myModule; // возвращаем модуль

});

Функция require() используется для импорта модулей:

require(["foo", "bar"], function(foo, bar) {

foo.doSomething();

});

где

["foo", "bar"] - указание именований подключаемых модулей;
function(foo, bar) { foo.doSomething(); } - функция, принимающая подключенные модули и реализующая некий функционал.

Также с помощью require() можно динамически импортировать зависимости в модуль:

define(function(require) {

var foobar;

require(["foo", "bar"], function(foo, bar) {

foobar = foo() + bar();

});

// возвращаем модуль, обратите внимание на другой шаблон определения модуля

return {

foobar: foobar

};

});

[/spoiler]

Загрузчик файлов и модулей RequireJS

RequireJS - это загрузчик файлов и модулей JavaScript, реализующий AMD и оптимизированный для использования в браузере, но который также может использоваться и в других средах JavaScript, таких как Rhino и Node.

Использование модульного загрузчика скриптов, такого как RequireJS, повышает скорость и качество кода.

Официальный сайт https://requirejs.org/.

Установка в Node.js:

npm install requirejs

Использование RequireJS:

Подключение загрузчика в index.html строкой <script data-main="index" src="./node_modules/requirejs/require.js"></script>, где
- data-main="index" - файл (расширение .js для краткости в RequireJS опускается), который является точкой входа приложения (именно в нём подключаются необходимые модули и выполняются основные операции);
- src="./node_modules/requirejs/require.js" - путь, по которому доступен файл require.js.
Определение модулей в формате AMD (Asynchronous Module Definition) с помощью define(), где укажем:
- module_id (необязательный) - идентификатор модуля, требуется только при использовании не-AMD инструментов объединения; когда этот аргумент опущен, модуль называется анонимным;
- [dependencies] (необязательный) - массив зависимостей (имен файлов), которые требуются определяемому модулю;
- function - это функция (функционал модуля), которая выполняется при создании экземпляра модуля.
Подключение нужных модулей, определенных в формате AMD, в файле index.js (в точке входа) с помощью функции require(), где
- ["foo", "bar"] - указание именований подключаемых модулей;
- function(foo, bar) { foo.doSomething(); } - функция, принимающая подключенные модули и реализующая некий функционал.

Пример

Файл index.html

<!DOCTYPE html>

<head>

<title>My module</title>

</head>

<body>

<h2>My module</h2>

</body>

</html>

Файл exp.js (определение модуля в формате AMD (Asynchronous Module Definition) с помощью define():

define(function () {

return (result = 6 * 6);

});

Файл index.js (подключение нужных модулей, определенных в формате AMD, с помощью функции require():

require(["exp"], function (exp) { // подключаем модуль

console.log("Hello, world!"); // собственный функционал index.js

console.log(result); // импортированный из exp.js результат

});

[свернуть]