RequireJS

Создаем main.js со следующим содержанием:

require(["util"], function(util) {
  alert("это выполнится только тогда, когда файл util.js будет загружен");
});

Создадим пустой util.js файл и проверим работу. На данный момент у вас должна получится такая структура директорий:

  • index.html
  • scripts/ main.js require.js ** util.js

По сути работа с RequireJS заключается в использовании 2х методов define и require.

Метод define служит для описания модулей и имеет следующий синтаксис:

define( [moduleName,] dependencies, callback)
moduleName - имя модуля (необязательный параметр)
dependencies - массив зависимостей(с другими модулями)
callback - тело модуля, в которое передаются dependencies

Для нашего случая будет выглядеть так(модуль содержит только одну зависимость):

define( "unit",
        ['jQuery'],
        function( jQuery ){
          return { foo : "bar" };
        }
);

Но если бы модуль содержал больше зависимостей, мы бы могли добавить их:

['jQuery', 'jQueryUI', 'AnotherModule']

и соответственно в функцию бы добавилось больше параметров:

function( jQuery, jQueryUI, AnotherModule ){

Метод require фактически должен вызываться только один раз в главном файле(но в проекте может быть не один главный/корневой файл) имеет схожий синтаксис с define, но не имеет параметра названия модуля:

require( requiredModules, callback)

Мы уже поместили вызов метода в main.js

require(["util"], function(util) {
  //важно то, что util будет доступно только тут
  //и его не будет в глобальной области видимости
});

Настроить опции RequireJS можно через метод require.config(), например:

  require.config({
    baseUrl: "/another/path",
    paths: { "some": "some/v1.0" },
    waitSeconds: 15
  });

Возможные параметры:

baseUrl - базовый путь, где лежат все модули
paths - пути для модулей, которые находятся не в baseUrl
waitSeconds - таймаут, который загрузчик будет ждать скрипта
shim - для поддержки модулей сторонних модулей описанных не через define
map - позволяет ссылаться через алиас на разные файлы для разных сборок
config - для дополнительных настроек, которые будут доступны в модулях
packages - указание директорий/пакетов, для множественной загрузки модулей
context - указание контекста(например: version1, version2)
deps - массив зависимостей
callback - вызовется, когда будут загружены зависимости указынные в параметре deps
enforceDefine - true/false. вызовет ошибку, припопытке загрузки скрипта без define
xhtml - true/false. использование createElementNS для создания скрипт тегов
urlArgs - дополнительные параметры при запросе скрипта(удобно использовать решая вопрос кеширования)
scriptType - тип скрипта, по умолчанию "text/javascript" (можно также "text/javascript;version=1.8")

Более подробно рассмотрим некоторые из них.

Параметр shim позволяет добавить сторонние модули(которые определены не в AMD стиле, или проще говоря: без метода define) к общей схеме.

requirejs.config({
    paths:{
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery'
    },
    shim: {
        'jquery': {
            exports: 'jQuery',
        }
    }
});

require(["util", "jquery"], function(util, $) {
    console.log($(document));
})

Внимание! Я специально в примере подключил старую(1.4.4) версию jQuery, т.к. новая(>1.7.1) уже умная – совместима с AMD: если обнаруживает метод define, то автоматически прописывает себя. Т.е. мы можем использовать модуль “jquery” без объявления его через shim.

С помощью параметра map мы можем сделать более гибкими связи между модулями, например новый модуль зависит от более новой версии библиотеки, а старый модуль, но который все равно нужно поддерживать, – использует древнюю версию. Так вот для обоих модулей мы можем прописать одну зависимость на библиотеку, а через map реализовать версионность:

requirejs.config({
  map: {
     'some/newmodule': { 'foo': 'foo1.2' },
     'some/oldmodule': { 'foo': 'foo1.0' }
  }
});
08 ноября 2017, 08:59    16



Наверх