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

#javascript #javascript_faq

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

Ответы

Ответ 1

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


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

// Описание зависимостей
define(['jquery', 'foo', 'bar'], function (jquery, foo, bar) {
    // Определение самого модуля
    return function () {};
});

Common.js - подход, используемый, например, в Node.js экосистеме. Типичный модуль
имеет вид:

// Импортируем зависимости
var jquery = require('jquery'),
    foo = require('foo'),
    bar = require('bar');

// Экспортируем тело модуля
module.exports = function() {};

UMD - комбинированный подход, позволяющий описывать модули, работающие как в AMD
инфраструктуре, так и в Common.js. Является ничем иным, как средством совместимости.
Модули 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, все идет
к тому, что рано или поздно они появятся.


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


https://addyosmani.com/writing-modular-js/
https://learn.javascript.ru/modules
http://frontender.info/es6-modules/
https://habrahabr.ru/post/181536/
Очевидно, есть и другие статьи по теме. Google расскажет вам о них лучше меня. =)