Подтвердить что ты не робот

Модульный JavaScript - есть ли какие-либо подходы, помимо CommonJS и AMD?

В настоящее время я готовлю оценки модульной подсистемы JavaScript для своего корпуса. Мы разрабатываем "JavaScript Best Practices" для наших проектов, модуляция - один из центральных вопросов.

Из моих исследований до сих пор были выявлены два ведущих подхода:

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

Кроме того, там также goog.provide/goog.require из Google Closure Library.

Есть ли дальнейшие подходы к рассмотрению? Любые важные/релевантные спецификации, которые я пропустил?

Наши требования, кратко:

  • Структура кода JavaScript в отдельных файлах.
  • Загрузите соответствующие модули во время выполнения.
  • ... без необходимости включать каждый отдельный файл в качестве тега script.
  • Не обязательно поддерживать индекс файлов JavaScript.
  • Поддержка агрегации и минимизации - возможность создания и использования одного файла с минимальным/оптимизированным JavaScript.
  • Уметь использовать модули в разных комбинациях - часто существуют разные веб-страницы/клиенты, которым нужны разные подмножества модулей.
  • Поддерживающая документация (с JSDoc?).
  • Подходит для тестирования.
  • Подходит для веб-браузера.
  • Разумная поддержка IDE.

Потенциально:

  • Совместим с модулями ES6.
  • Подходит для Node.js и мобильных платформ (например, PhoneGap/Cordova).

Новые предложения из ответов:

  • плюс дополнительный компилятор.
  • (см. примечание ниже).
  • (см. примечание ниже).

Боковые заметки:

  • Вопрос не, какой подход лучше.
  • Я не спрашиваю о конкретных библиотеках и инструментах, а скорее о подходах и спецификациях.
  • Я специально не запрашиваю ресурс вне сайта. (Если для этого нет тега SO, нам, вероятно, не разумно его рассматривать.)
  • Заметка о фреймах, таких как или . Это не очень подходит в рамках этого вопроса. Если проекту нужна инфраструктура (будь то AngularJS или ExtJS), тогда в основном не возникает вопрос о модуляции, так как структура должна обеспечивать модульную OOTB. Если проекту не нужна инфраструктура, то из-за модуляции может возникнуть переполнение. Это одна из причин, по которым я специально не спрашиваю о библиотеках/инструментах.
4b9b3361

Ответ 1

Как насчет ES Harmony?

цитата отсюда: http://addyosmani.com/writing-modular-js/

Примечание. Хотя Harmony все еще находится в фазе предложения, вы можете уже попробовать (частичные) функции ES.next, которые адресуют native поддержка написания модульного JavaScript благодаря Google Traceurкомпилятор. Чтобы начать работу с Traceur за минуту, прочитайте это руководство по началу работы. Также есть презентация JSConf о это стоит посмотреть, если вам интересно узнать больше о проекта.

hopeThatHelps

Ответ 2

Еще одна опция: система модулей AngularJS, как описано здесь. Однако это действительно полезно только на стороне клиента.

Ответ 3

Вы написали: "Я не прошу конкретных библиотек и инструментов, а скорее подходит для подходов и спецификаций". однако вы можете приблизиться к окружению ExtJS 5, который удовлетворяет всем вашим требованиям.

Если вы не заинтересованы в таком коммерческом продукте, вы можете просто познакомиться с шаблонами и решениями в нем.

Относительно ваших требований:

Структура кода JavaScript в отдельных файлах.

Он реализует парадигму объектно-ориентированного программирования, поэтому вы можете создавать классы, подклассы, объекты, mixins, плагины. Он соединяет программирование на основе классов и прототипное программирование.

Стоит отметить архитектуру MVVM (View, Controller, ViewModel), привязку данных, сеанс данных (управление клиентскими данными/записи/сущности).

Конфигурация системы также весьма интересна. Это очень удобно. Свойство config объединяется из родительского класса в подклассы, а также при создании объекта вы можете передать конфигурацию, которая также будет объединена. Это очень полезно, когда мы хотим иметь настраиваемые и гибкие компоненты.

Загрузите соответствующие модули во время выполнения.

Каждый класс может иметь директиву requires или uses, которые используются при создании приложения в один файл. Вы также можете вручную загружать файлы.

... без необходимости включать каждый отдельный файл в качестве тега script.

В dev env файлы загружаются динамически (асинхронно или синхронно).

В prod env необходимые файлы были созданы для одного миниатюрного файла.

Поддержка агрегации и минимизации - возможность создания и использования одного мини-оптимизированного файла JavaScript.

Вы можете создать приложение с помощью инструмента Sencha cmd (и сделать несколько других вещей).

Вы можете использовать три предопределенных env (разработка, тестирование, производство) или создать свои собственные (на основе файлов конфигурации и ant).

Уметь использовать модули в разных комбинациях - часто используются разные веб-страницы/клиенты, которым нужны разные подмножества модулей.

Вы можете использовать workspaces и packages.

Поддерживающая документация (с JSDoc?).

JS Duck, учебник

Подходит для тестирования.

Вы можете сделать модульные тесты (PhantomJS, JSLint, PhantomLint, Жасмин).

Вы можете использовать выделенную инфраструктуру, например Siesta или другие популярные платформы тестирования, такие как Selenium.

Подходит для веб-браузера.

С официального сайта:

Предоставлять приложения в самом широком выборе браузеров и операционных систем с одной базой кода. Ext JS 5 использует возможности HTML5 для современных браузеров при сохранении совместимости и функциональности для устаревших браузеры. Уверенно доставляйте приложения своим конечным пользователям, независимо от того, какой браузер они используют.

Поддержка: Safari 6+, Firefox, IE 8+, Chrome, Opera 12+, Safari/iOS, Safari/iOS 6+, Chrome/Android, Chrome/Android 4.1+, IE 10+/Win 8

Поддерживает приложение Cordova и PhoneGap.

Разумная поддержка IDE.

Я не очень хорошо знаю IDE с выделенной поддержкой ExtJS, но я работаю над Webstorm, и это прекрасно. Источники библиотеки находятся внутри проекта, поэтому автозаполнение работает (но не на 100% отлично).

Заключение

Я не хочу прославлять ExtJS 5. Среда довольно зрелая и стабильная, но в последней версии фреймворка (v5) есть пара ошибок, и не все отлично. Однако я мог бы пойти глубже и узнать принципы этой структуры, которые разумны, ориентированы в хорошем направлении, но иногда плохо реализованы;)

Ответ 4

RequireJS - хороший подход, поскольку он позволяет загружать динамический модуль javascript, а также сохраняет код чистым. Вы также можете минимизировать все модули, и он действительно работает очень быстро. Он также позволяет что-то называемое shimming, где вы можете указать зависимости для библиотеки или любого js файла, так что всякий раз, когда вы пытаетесь загрузить его, все зависимости также следуют

Ответ 5

Взгляните на systemJS:

Универсальный загрузчик модулей Spec-compliant - загружает модули ES6, AMD, CommonJS и глобальные скрипты.

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

Загружает любой формат модуля, автоматически определяя формат. Модули также могут указывать свой формат с помощью метаконфигурации. Обеспечивает всесторонние и точные тиражирование кругов AMD, CommonJS и ES6 обратная обработка. Загружает модули ES6, скомпилированные в Форма System.register для производства, поддерживающая полный круговой поддержка ссылок. Поддержка карты стиля, путей, пучков, прокладки в стиле RequireJS и плагины. Отслеживает версии пакетов и разрешает semver-compatibile запросы через синтаксис версии пакета - [email protected], package^@x.y.z. Плагины загрузчика позволяют загружать активы через модуль именования, такие как CSS, JSON или изображения. Предназначен для работы с Загрузочный модуль ES6 polyfill (9KB) для совокупного 16KB, minified и gzipped. В будущем, с собственными реализациями, Загрузчик модуля ES6 polyfill больше не нужен. Как jQuery обеспечивает DOM, эта библиотека может сглаживать несоответствия и отсутствие практической функциональности, предоставляемой собственной системой Загрузчик.

Работает в IE8 + и NodeJS.

Создатель lib - Guy Bedford - также отличный ведущий: systemJS presentation.

Ответ 6

Взгляните на browserify. Он реализует интересный подход. С помощью браузера вы можете писать код, который требует использования так же, как вы его используете в Node.

Ответ 7

Существуют различные библиотеки для модульного развития, Из которых некоторые полностью заполняют ваши критерии.

  • System.jsSystem.js - это модульная библиотека разработки с некоторыми базовыми функциями для работы с IE8 + и nodejs. Он также предоставляет возможность разрабатывать модули, и вы можете включить его в свой основной файл. Для получения дополнительной информации о System.js выполните https://github.com/systemjs/systemjs
  • Require.jsЛучшая библиотека для модульного развития. Предоставляет различные полезные функции и поддерживает более старый браузер. Он поддерживает IE 6+. Еще одна полезная функция require.js заключается в том, что ее можно использовать с Rhinojs и nodejs. Реализация проста, так же как вы добавляете модули в nodejs.