Какие знаешь системы модульности кроме ECMAScript и CommonJS?

Системы модульности в JavaScript

Кроме ES6 модулей и CommonJS существует несколько других подходов к организации кода.

1. AMD (Asynchronous Module Definition)

AMD — стандарт для асинхронной загрузки модулей в браузере. Основная библиотека — RequireJS.

// Определение модуля
define("myModule", ["dep1", "dep2"], function(dep1, dep2) {
  return {
    sayHello: function() {
      console.log("Hello from myModule");
    }
  };
});

// Использование модуля
require(["myModule"], function(myModule) {
  myModule.sayHello();
});

Особенности:

• Асинхронная загрузка — модули загружаются параллельно
• Зависимости передаются как массив строк
• Используется в основном в наследии (legacy код)

Плюсы:

• Подходит для браузеров
• Параллельная загрузка модулей

Минусы:

• Синтаксис громоздкий
• Сложнее для понимания новичками
• Практически вытеснена ES6 модулями

2. UMD (Universal Module Definition)

UMD — универсальный формат, работающий и в браузере, и в Node.js:

(function(root, factory) {
  if (typeof define === "function" && define.amd) {
    // AMD
    define(["dep1"], factory);
  } else if (typeof module === "object" && module.exports) {
    // CommonJS
    module.exports = factory(require("dep1"));
  } else {
    // Глобальная переменная
    root.myLib = factory(root.dep1);
  }
}(typeof self !== "undefined" ? self : this, function(dep1) {
  // Код модуля
  return {
    greet: function() { return "Hello"; }
  };
}));

Когда используется:

• Библиотеки (jQuery, lodash исторически)
• Необходимость поддержки разных окружений

Плюсы:

• Работает везде
• Обратная совместимость

Минусы:

• Синтаксис очень громоздкий
• Потребление памяти больше

3. IIFE (Immediately Invoked Function Expression)

IIFE — самовызывающаяся функция, создающая область видимости:

const app = (function() {
  // Приватные переменные
  const privateData = "secret";

  // Приватная функция
  function privateMethod() {
    console.log(privateData);
  }

  // Публичный интерфейс
  return {
    publicMethod: function() {
      privateMethod();
    }
  };
})();

app.publicMethod(); // Логирует: secret
console.log(app.privateData); // undefined (приватное)

Особенности:

• Паттерн, а не стандарт
• Создаёт область видимости через функцию
• Используется для инкапсуляции

Применение:

• Старый код jQuery
• Плагины для браузера
• Глобальная область видимости

4. Модули как неймспейсы

Проще всего — использовать объекты для группировки:

// myApp.js
const MyApp = {
  utils: {
    formatDate: function(date) {
      return date.toLocaleDateString();
    }
  },
  api: {
    fetchUsers: async function() {
      return fetch("/api/users").then(r => r.json());
    }
  }
};

// main.js
<script src="myApp.js"></script>
<script>
  MyApp.utils.formatDate(new Date());
  MyApp.api.fetchUsers();
</script>

Минусы:

• Глобальная загрязнение
• Без истинной инкапсуляции

5. YModules (Яндекс)

YModules — специализированная система модульности от Яндекса:

modules.define("my-module", ["other-module"], function(provide, OtherModule) {
  var MyModule = {
    someMethod: function() {
      return OtherModule.doSomething();
    }
  };
  provide(MyModule);
});

require(["my-module"], function(MyModule) {
  MyModule.someMethod();
});

Особенности:

• Асинхронная загрузка
• Интеграция с сборщиком Bem tools

6. Webpack/Rollup конфигурация как система модульности

Сборщики определяют, как организованы модули:

// webpack.config.js
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    libraryTarget: "umd" // Выходной формат UMD
  },
  module: {
    rules: [{
      test: /\\.js$/,
      use: "babel-loader"
    }]
  }
};

Сборщик преобразует ES6 модули в нужный формат.

7. Web Components (Shadow DOM)

Web Components — стандарт для создания переиспользуемых компонентов с инкапсуляцией:

class MyElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        p { color: blue; } /* Не влияет на глобальные стили */
      </style>
      <p>Hello from Web Component</p>
    `;
  }
}

customElements.define("my-element", MyElement);

Особенности:

• Инкапсуляция CSS и HTML
• Работает во всех браузерах (с полифиллами)
• Стандарт W3C

Сравнительная таблица

Историческая эволюция

1. Ранние 2010s — AMD (RequireJS), IIFE
2. 2014-2015 — CommonJS популяризирована Node.js
3. 2015 — ES6 (ES2015) стандарт модулей
4. 2020+ — ES6 модули почти везде

Рекомендация на практике

Используйте только ES6 модули:

// Правильно
import { Component } from "./Component.js";
export default MyComponent;

Остальные системы нужны только для поддержки legacy-кода или специфических случаев (кроссплатформные библиотеки через UMD).