Просто и доступно: базовое использование RequireJS в HTML страницах « Марк и Марта.Ру. Записки отца-программиста

Просто и доступно: базовое использование RequireJS в HTML страницах

Фреймворк RequireJS ничего особенного не делает - не создает красивых всплывающих окон, не помогает управлять контролами и т.п. Но его роль в разработке крупных JavaScipt приложений очень важна.

Не буду переводить и переписывать документацию с официального сайта, остановлюсь только на том, что лично мне было полезно - про управление подключением JS файлов для вашего приложения.

Для начала загрузите RequireJS со страницы: http://requirejs.org/docs/download.html

В директорию scripts поместите скачанный файл "require.js" и создайте "main.js". В той же директории "scripts" создайте еще 3 файла – "one.js", "two.js", "three.js".

В каждом файле one, two, three добавьте соответственно код:

//one.js
alert('one.js');

//two.js
alert(two.js');

//three.js
alert('three.js');

//one.js

alert('one.js');

//two.js

alert(two.js');

//three.js

alert('three.js');

Создайте HTML файл index.html и вставьте ниже следующий код. Обратите внимание на параметр data-main в тэге <script>:

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>Test</h1>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>My Sample Project</title>

</head>

<body>

</body>

</html>

В файл "main.js" добавьте такой код:

require(["one", "two", "three"], function (one, two, three) {
});

1 2	require(["one", "two", "three"], function (one, two, three) { });

Теперь откройте в браузере страницу index.html. Она выдаст 3 сообщения 'one.js', 'two.js', 'three.js'. При этом в коде html-страницы есть ссылка на загрузку только одного JS файла.