JavaScript
Методы модуляции

Универсальное определение модуля (UMD)

Шаблон UMD (Universal Module Definition) используется, когда наш модуль необходимо импортировать несколькими различными загрузчиками модулей (например, AMD, CommonJS).

Сама модель состоит из двух частей:

1. IIFE (Expression Exposed Function Expression), который проверяет загрузчик модуля, который реализуется пользователем. Это потребует двух аргументов; root ( this ссылка на глобальную область) и factory (функция, где мы объявляем наш модуль).

2. Анонимная функция, которая создает наш модуль. Это передается как второй аргумент для части IIFE шаблона. Эта функция передает любое количество аргументов, чтобы указать зависимости модуля.

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

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['exports', 'b'], factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        factory(exports, require('b'));
    } else {
        // Browser globals
        factory((root.commonJsStrict = {}), root.b);
    }
}(this, function (exports, b) {
    //use b in some fashion.

    // attach properties to the exports object to define
    // the exported module properties.
    exports.action = function () {};
}));

Сразу вызывается функциональные выражения (IIFE)

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

var Module = (function() {
  var privateData = 1;

  return {
    getPrivateData: function() {
      return privateData;
    }
  };
})();
Module.getPrivateData(); // 1
Module.privateData; // undefined

Подробнее см. В разделе « Модуль» .

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

AMD - это система определения модулей, которая пытается решить некоторые общие проблемы с другими системами, такими как CommonJS и анонимные закрытия.

AMD решает эти проблемы:

• Зарегистрировать фабричную функцию, вызвав define (), вместо того, чтобы немедленно ее выполнить
• Передача зависимостей в виде массива имен модулей, которые затем загружаются, вместо использования глобальных переменных
• Выполнение только заводской функции после загрузки и выполнения всех зависимостей
• Передача зависимых модулей в качестве аргументов функции фабрики

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

Вот пример AMD:

// Define a module "myModule" with two dependencies, jQuery and Lodash
define("myModule", ["jquery", "lodash"], function($, _) {
    // This publicly accessible object is our module
    // Here we use an object, but it can be of any type
    var myModule = {};

    var privateVar = "Nothing outside of this module can see me";

    var privateFn = function(param) {
        return "Here's what you said: " + param;
    };

    myModule.version = 1;

    myModule.moduleMethod = function() {
        // We can still access global variables from here, but it's better
        // if we use the passed ones
        return privateFn(windowTitle);
    };

    return myModule;
});

Модули также могут пропустить имя и быть анонимным. Когда это будет сделано, они обычно загружаются по имени файла.

define(["jquery", "lodash"], function($, _) { /* factory */ });

Они также могут пропускать зависимости:

define(function() { /* factory */ });

Некоторые загрузчики AMD поддерживают определение модулей как простых объектов:

define("myModule", { version: 1, value: "sample string" });

CommonJS - Node.js

CommonJS - популярный шаблон модуляции, который используется в Node.js.

Система CommonJS сосредоточена вокруг функции require() которая загружает другие модули и свойство exports которое позволяет модулю экспортировать общедоступные методы.

Вот пример CommonJS, мы загрузим модуль Lodash и Node.js ' fs :

// Load fs and lodash, we can use them anywhere inside the module
var fs = require("fs"),
    _ = require("lodash");

var myPrivateFn = function(param) {
    return "Here's what you said: " + param;
};

// Here we export a public `myMethod` that other modules can use
exports.myMethod = function(param) {
    return myPrivateFn(param);
};

Вы также можете экспортировать функцию как весь модуль, используя module.exports :

module.exports = function() {
    return "Hello!";
};

Модули ES6

export function greet(name) {
    console.log("Hello %s!", name);
}

var myMethod = function(param) {
    return "Here's what you said: " + param;
};

export {myMethod}

export class MyClass {
    test() {}
}

import greet from "mymodule.js";

greet("Bob");

import * as myModule from "mymodule.js";

myModule.greet("Alice");

import { greet as A, myMethod as B } from "mymodule.js";

Более подробную информацию о модулях ES6 можно найти в разделе « Модули» .