Одной из наиболее часто используемых библиотек JavaScript сегодня является RequireJS. В каждом проекте, которым я занимаюсь в последнее время, мы используем RequireJS или я предлагаю добавить RequireJS. В этом посте я собираюсь описать, что такое RequireJS и некоторые из его основных сценариев.

Определения асинхронных модулей (AMD) сначала

Нельзя начать разговор о RequireJS, не упомянув, что такое модули JavaScript и что такое AMD.

Модули JavaScript — это просто фрагменты кода, которые следуют SRP (принципу единой ответственности) и предоставляют общедоступный API. В современной разработке JavaScript вы инкапсулируете множество функций внутри модулей, и в большинстве проектов каждый модуль существует в своем собственном файле. Это немного усложняет жизнь разработчикам JavaScript, поскольку им нужно постоянно следить за зависимостями между модулями и загружать модули в определенном порядке, иначе возникнут ошибки во время выполнения.

Когда вы хотите загрузить модули JavaScript, вы используете теги script. Чтобы загрузить зависимости модуля, вам нужно сначала загрузить зависимость, а затем зависимую. При использовании тегов скриптов вам необходимо упорядочить их загрузку в указанном порядке, и скрипты будут загружаться синхронно. Вы можете использовать ключевые слова async и defer, чтобы сделать загрузку асинхронной, но вы можете потерять порядок загрузки в процессе. Другой вариант — связать все скрипты, но все же вам нужно будет упорядочить их в правильном порядке во время связывания.

AMD занимается определением модулей таким образом, чтобы модуль и его зависимости могли загружаться асинхронно и в правильном порядке.

CommonJS, который является попыткой стандартизировать общие шаблоны JavaScript, включает определение AMD, которое я рекомендую вам прочитать, прежде чем продолжить этот пост. В ECMAScript 6, спецификациях JavaScript vNext, есть спецификации для экспорта, импорта и модулей, которые станут частью языка JavaScript, но только в ближайшем будущем. Здесь RequireJS входит в нашу историю.

ТребуетсяJS?

RequireJS — это структура файлов и модулей JavaScript, которую можно загрузить с https://requirejs.org/ или с помощью Nuget, если вы работаете в среде Visual Studio. Он поддерживается как в браузерах, так и в серверных средах, таких как node.js. Используя RequireJS, вы будете загружать только соответствующие зависимости модуля в правильном порядке.

Что RequireJS делает, когда вы его используете, так это создает теги сценария для каждой определенной вами зависимости и загружает эти зависимости на лету с помощью функции head.appendChild(). Затем, после загрузки зависимостей, RequireJS определит правильный порядок определения модулей и вызовет определение каждого модуля в этом правильном порядке. Это означает, что вам нужен только один корень для загрузки всей необходимой вам функциональности, а RequireJS сделает все остальное. Чтобы правильно использовать эту функциональность, вам нужно будет определить каждый из ваших модулей с помощью RequireJS API, иначе ничего не будет работать должным образом.

API RequireJS существует внутри пространства имен requirejs, которое загружается при загрузке скрипта RequireJS. RequireJS включает в себя три основные функции API:

  • define — функция используется для определения модуля. Каждый модуль определяется уникальным идентификатором модуля, который будет использоваться функциональностью среды выполнения RequireJS. Функция define — это глобальная функция, и вам не нужно использовать ее с пространством имен requirejs.
  • require — функция используется для загрузки необходимых зависимостей. Это глобальная функция, и вам не нужно использовать ее с пространством имен requirejs.
  • config — эта функция используется для настройки функциональности среды выполнения requirejs.

Позже мы рассмотрим, как использовать эти функции, но сначала давайте разберемся, как запустить процесс загрузки RequireJS.

Атрибут data-main

После того, как вы загрузили RequireJS, первое, что нужно сделать после того, как вы добавили его скрипт в свое решение, — это понять, как RequireJS начинает работать. После загрузки RequireJS ищет скрипт с атрибутом data-main (это должен быть тот же скрипт с атрибутом src, установленным для загрузки RequireJS). data-main должен быть установлен на базовый URL-адрес для всех скриптов. С базового URL-адреса RequireJS начнет загружать все соответствующие модули. Вот пример тега скрипта с атрибутом data-main:

<script data-main="scripts/app.js" src="scripts/require.js"></script>

Другой способ определить базовый URL — использовать функцию config, которую мы увидим позже. RequireJS предполагает, что все зависимости являются сценариями, поэтому при объявлении зависимости вам не нужно использовать суффикс .js.

Функция конфигурации

Если вы хотите изменить значения конфигурации RequireJS по умолчанию на свои собственные, это можно сделать с помощью функции requirejs.config. Функция config получает объект параметров, который может включать множество параметров конфигурации. Вот некоторые из конфигураций, которые вы можете использовать:

  • baseUrl — корневой путь для начала загрузки модулей.
  • paths — сопоставление путей для модулей, которых нет в baseUrl.
  • shims — конфигурация для зависимостей, экспорта и функции инициализации для переноса скриптов/модулей, которые не используют функцию define RequireJS. Например, если библиотека подчеркивания не использует функцию define RequireJS, и вы все равно хотите использовать ее с RequireJS, вам придется определить ее как прокладку в config. функция.
  • deps — массив зависимостей для загрузки.

Вот пример использования функции config:

require.config({
    //By default load any module IDs from scripts/app
    baseUrl: 'scripts/app',
    //except, if the module ID starts with "lib"
     paths: {
        lib: '../lib'
    }, 
    // load backbone as a shim
    shim: {
        'backbone': {
            //The underscore script dependency should be loaded before loading backbone.js
            deps: ['underscore'],
            // use the global 'Backbone' as the module name.
            exports: 'Backbone'
        }
    }
});

Базовый URL-адрес в примере установлен как scripts/app, каждый модуль, начинающийся с lib, настроен на использование из папки scripts/lib, а магистраль загружается как шим с зависимостями.

Определение модулей с помощью RequireJS

Модули — это просто объекты с хорошей областью действия, которые предоставляют API и инкапсулируют их внутренние компоненты. Чтобы определить модуль, RequireJS предоставляет функцию define. По соглашению в каждом файле JavaScript должен быть только один вызов define. Функция define получает массив зависимостей и функцию, которая будет содержать все определения модуля. По соглашению функция определения модуля получает в качестве параметров все предыдущие зависимости и в том порядке, в котором они были предоставлены в массиве. Например, вот простое определение модуля:

define(["logger"], function(logger) {        
        return {
             firstName: “John",
             lastName: “Black“,
             sayHello: function () {
                logger.log(‘hello’);
             }
        }
    }
);

Как видите, в функцию define передается массив с зависимостью от регистратора, которая позже используется в модуле. Кроме того, вы можете видеть, что в функции определения модуля есть параметр под названием регистратор, который будет установлен для загруженного модуля регистратора. Каждый модуль должен возвращать свой API, который в данном случае представляет собой два свойства (firstName и lastName) и функцию (sayHello). Позже, если вы загрузите этот модуль как другую зависимость модуля с идентификатором модуля, вы сможете использовать открытый API.

Использование функции require

Еще одна полезная функция в RequireJS — функция require. Функция require используется для загрузки зависимостей без создания модуля. Например, вот использование функции require, которая определяет функцию, для работы которой требуется jQuery:

require(['jquery'], function ($) {
    //jQuery was loaded and can be used now
});

Резюме

В посте я представил RequireJS, одну из библиотек, которые я использую в каждом проекте приложения JavaScript. Помимо загрузки зависимостей модулей и в соответствующем порядке, RequireJS помогает писать модульный код JavaScript, который гораздо удобнее в сопровождении и повторном использовании.

Добавить комментарий

facebook linkedin twitter электронная почта

Первоначально опубликовано на сайте blogs.microsoft.co.il 23 июля 2013 г.