Страницы

Поиск по вопросам

четверг, 4 октября 2018 г.

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

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


Ответ

В современной экосистеме 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 расскажет вам о них лучше меня. =)

Комментариев нет:

Отправить комментарий