Модульный JavaScript - есть ли какие-либо подходы, кроме CommonJS и AMD, для рассмотрения?
В настоящее время я готовлю оценочные подходы к модуляции JavaScript для моей корпорации. Мы находимся в процессе определения "JavaScript Best Practices" для наших проектов, модульность является одним из центральных вопросов.
Из моих исследований пока выявлено два ведущих подхода:
Огромное количество загрузчиков, плагинов, библиотек и т.д. вокруг них.
Помимо этого есть также goog.provide / goog.require из библиотеки Google Closure.
Есть ли дальнейшие подходы к рассмотрению? Какие-нибудь важные / важные характеристики я пропустил?
Наши требования, кратко:
- Структурируйте код JavaScript в отдельных файлах.
- Загрузите соответствующие модули во время выполнения.
- ... без необходимости включать каждый файл в качестве тега скрипта.
- Не должно быть необходимости поддерживать индекс файлов JavaScript.
- Поддержка агрегирования и минимизации - возможность создавать и использовать один минимизированный / оптимизированный файл JavaScript.
- Уметь использовать модули в разных комбинациях - часто есть разные веб-страницы / клиенты, которым нужны разные подмножества модулей.
- Вспомогательная документация (с JSDoc?).
- Подходит для тестирования.
- Подходит для веб, кросс-браузер.
- Разумная поддержка IDE.
Потенциально:
- Выравнивается с модулями ES6.
- Подходит для Node.js и мобильных платформ (таких как PhoneGap/Cordova).
Новые предложения из ответов:
- ecmascript-гармония плюс дополнительный компилятор.
- angularjs (см. примечание ниже).
- extjs (см. примечание ниже).
Примечания стороны:
- Вопрос не в том, какой подход лучше.
- Я не спрашиваю о конкретных библиотеках и инструментах, а скорее о подходах и спецификациях.
- Я специально не прошу сторонний ресурс. (Если для этого нет SO-тега, возможно, нам не стоит его рассматривать.)
- Замечание об основах, таких как angualjs или extjs. Это не очень подходит в рамках этого вопроса. Если проекту нужна среда (будь то AngularJS или ExtJS), то в основном нет вопроса о модульности, поскольку среда должна обеспечивать модульность OOTB. Если для проекта не требуется фреймворк, излишне создавать фреймворк из-за модульности. Это одна из причин, по которой я специально не спрашиваю о библиотеках / инструментах.
7 ответов
Как насчет ES Harmony?
цитата отсюда: http://addyosmani.com/writing-modular-js/
Примечание. Несмотря на то, что Harmony все еще находится на стадии предложения, вы уже можете попробовать (частично) возможности ES.next, которые касаются встроенной поддержки написания модульного JavaScript, благодаря компилятору Google Traceur. Чтобы приступить к работе с Traceur менее чем за минуту, прочитайте это руководство по началу работы. Есть также презентация об этом, которую стоит посмотреть, если вам интересно узнать больше о проекте.
надеюсь, это поможет
Другой вариант: модульная система AngularJS, как описано здесь. Однако это действительно полезно только на стороне клиента.
RequireJS - хороший подход, так как он позволяет динамически загружать модуль javascript, а также поддерживает код в чистоте. Вы также можете минимизировать целые модули, и это действительно работает очень быстро. Это также позволяет что-то, называемое shimming, где вы можете указать зависимости для библиотеки или любого файла js, так что всякий раз, когда вы пытаетесь загрузить его, все зависимости также следуют
Посмотрите на systemJS:
Совместимый со спецификацией универсальный загрузчик модулей - загружает модули ES6, AMD, CommonJS и глобальные скрипты.
Разработан как набор небольших расширений спецификации ES6 System loader, которые также можно применять индивидуально.
Загружает любой формат модуля, автоматически определяя формат. Модули также могут указывать свой формат с мета-конфигурацией. Обеспечивает полную и точную репликацию циклических ссылок AMD, CommonJS и ES6. Загружает модули ES6, скомпилированные в форму System.register для производства, поддерживая полную поддержку циклических ссылок. Поддерживает RequireJS-стиль карты, пути, пакеты, шим и плагины. Отслеживает версии пакетов и обрабатывает запросы на совместимость с несколькими полями с помощью синтаксиса версий пакетов - package@xyz, package^@xyz Плагины Loader позволяют загружать ресурсы через систему имен модулей, такую как CSS, JSON или изображения. Предназначен для работы с полифилом ES6 Module Loader (9 КБ) для общей общей площади 16 КБ, уменьшенной и сжатой. В будущем, с нативными реализациями, многопоточность ES6 Module Loader больше не понадобится. Поскольку jQuery предоставляет DOM, эта библиотека может сгладить несоответствия и пропустить практическую функциональность, предоставляемую встроенным системным загрузчиком.
Работает в IE8+ и NodeJS.
Создатель библиотеки - Гай Бедфорд - также отличный докладчик: презентация systemJS.
Вы написали: "Я спрашиваю не о конкретных библиотеках и инструментах, а о подходах и спецификациях". Однако вы можете посмотреть ближе к среде ExtJS 5, которая отвечает всем вашим требованиям.
Если вас не интересует такой коммерческий продукт, вы можете просто ознакомиться с закономерностями и решениями в нем.
Отношение к вашим требованиям:
Структурируйте код JavaScript в отдельных файлах.
Он реализует парадигму объектно-ориентированного программирования, так что вы можете создавать классы, подклассы, объекты, миксины, плагины. Это соединяет программирование на основе классов и программирование на основе прототипов.
Стоит отметить архитектуру MVVM (View, Controller, ViewModel), привязку данных, сеанс данных (управление записями / сущностями на стороне клиента).
Конфиг системы тоже довольно интересный. Это очень удобно. config свойство объединяется из родительского класса в подклассы, а также при создании объекта вы можете передать конфигурацию, которая также будет объединена. Это очень полезно, когда мы хотим иметь настраиваемые и гибкие компоненты.
Загрузите соответствующие модули во время выполнения.
Каждый класс может иметь requires или же uses директива, которая используется при сборке приложения в один файл. Вы также можете вручную загрузить файлы.
... без необходимости включать каждый файл в качестве тега скрипта.
В devenv файлы загружаются динамически (асинхронно или синхронно).
В prod env необходимые файлы были собраны в один минимизированный файл.
Поддержка агрегирования и минимизации - возможность создавать и использовать один минимизированный / оптимизированный файл JavaScript.
Вы можете создать приложение с Sencha cmd инструмент (и сделать несколько других вещей).
Вы можете использовать три предопределенных env (разработка, тестирование, производство) или создать свой собственный (на основе конфигурационных файлов и муравья).
Уметь использовать модули в разных комбинациях - часто есть разные веб-страницы / клиенты, которым нужны разные подмножества модулей.
Вы можете использовать рабочие пространства и пакеты.
Вспомогательная документация (с JSDoc?).
Подходит для тестирования.
Вы можете делать юнит-тесты (PhantomJS, JSLint, PhantomLint, Jasmine).
Вы можете использовать специализированные фреймворки, такие как 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. Среда достаточно зрелая и стабильная, но в последней версии framework (v5) есть пара ошибок, и не все замечательно. Однако я мог бы пойти глубже и узнать принципы этой структуры, которые являются разумными, ориентированными в правильном направлении, но иногда плохо реализованными;)
Существуют различные библиотеки, доступные для модульной разработки, из которых некоторые полностью соответствуют вашим критериям.
- System.js System.js - это модульная библиотека разработки с некоторыми базовыми функциями для работы с IE8+ и nodejs. Он также предоставляет возможность для разработки модулей, и вы можете включить его в свой основной файл. Для получения дополнительной информации о System.js следуйте https://github.com/systemjs/systemjs
- Require.js Лучшая библиотека для модульной разработки. Предоставляет различные полезные функции и поддерживает старый браузер тоже. Поддерживается из IE 6+. Еще одна полезная особенность require.js заключается в том, что его можно использовать с Rhinojs и nodejs. Реализация проста, как если бы вы включили модули в nodejs.
Посмотрите на обзор. В нем реализован интересный подход. С browserify вы можете писать код, который использует require так же, как вы бы использовали его в Node.