Подскажите модульную систему js

Sdafs Fasafs

Начал программировать на js, но опыта мало. Хотелось бы как на php иметь аналогию с классами. Чтобы писал в один файл модуль и потом его при необходимости подключал в файле. + Было бы преимуществом чтобы это потом можно было в 1 js файл компилировать. Подскажите пожалуйста какой фреймворк или библиотеку использовать под эти нужды? Или возможно какая то статья затрагивающая эту тему будет не лишней. Спасибо

1 ответ

Sdafs Fasafs

В современной экосистеме JavaScript можно выделить несколько подходов к разбиению кода на модули:

  1. AMD - формат описания модулей, используемый в Require.js. На мой ( очень субъективный) взгляд описание модулей несколько избыточно. Одна из основных "фишек" - асинхронная динамическая загрузка модулей по требованию. Хотя, если не изменяет память, есть и возможность собрать весь код в один пакет. Пример описания AMD модуля:

    // Описание зависимостей
    define(['jquery', 'foo', 'bar'], function (jquery, foo, bar) {
        // Определение самого модуля
        return function () {};
    });
  2. Common.js - подход, используемый, например, в Node.js экосистеме. Типичный модуль имеет вид:

    // Импортируем зависимости
    var jquery = require('jquery'),
        foo = require('foo'),
        bar = require('bar');
    
    // Экспортируем тело модуля
    module.exports = function() {};
  3. UMD - комбинированный подход, позволяющий описывать модули, работающие как в AMD инфраструктуре, так и в Common.js. Является ничем иным, как средством совместимости.

  4. Модули ES2015 - специальный синтаксис, введенный в стандарт ES2015 позволяющий разбивать код на модули. Пример модуля:

    // Импортируем зависимости
    import 'jquery' as $;
    import foo from 'foo';
    import bar from 'bar';
    
    // Экспортируем тело модуля
    export default function() {};

Плохая новость заключается в том, что ни один из подходов к описанию модулей не может работать в браузере напрямую. Вам в любом случае придется подключать некую стороннюю библиотеку для управления модулями. Для AMD - это Require.js; для Common.js - Browserify, Webpack и другие; для ES2015 - это может быть связка Browserify + Babel или что-то еще.

Для новых проектов я бы порекомендовал вам обратить внимание на ES2015 модули и на Common.js модули. Тому есть несколько причин:

  • Экосистема Node.js использует Common.js модули. Используя систему сборки вроде Browserify вы можете использовать npm модули. Это позволит вам писать код, который будет выполняться как на сервере, так и на клиенте.
  • При использовании современных систем сборки вы сможете практически без проблем комбинировать модули ES2015 и Common.js
  • Хотя сегодня в браузерах нет встроенных средств загрузки модулей ES2015, все идет к тому, что рано или поздно они появятся.

Что почитать:

licensed under cc by-sa 3.0 with attribution.