И вот почему
Ах, JavaScript. Язык веб-скриптов нашего времени. Благодаря этому веб-сайты действительно стали полезными. Давайте будем честными, есть гораздо лучшие языки программирования, чем JavaScript, и на то есть веские причины.
Этот язык был чрезмерно упрощен, и мало кто задумывался над его оптимизацией. Тем более, что он всегда предназначался только для дополнения веб-сайтов, а не для обеспечения основной функциональности. Но это изменилось в последние годы, когда появился новый метод. Познакомьтесь с модулями Javascript.
TLDR
Модули Javascript — это относительно новая технология, которая наконец-то поддерживается в браузерах. Они постепенно вытесняют другие методы программирования и в будущем станут основным методом разделения кода и поддержания чистоты и организованности вашего приложения.
Я верю, что все, кто читает это, знают, что такое JavaScript. Иначе вы бы не нашли эту статью. Первоначально Javascript был простым языком прототипирования, предназначенным для предоставления некоторых базовых функций веб-сайтам.
Не было понятия классов или других структур высшего программирования. Функции были максимумом, что можно было получить. Каждый файл JavaScript загружался и выполнялся один за другим. Весь этот процесс усложнял создание веб-сайтов, которые были бы чем-то большим, чем просто причудливым представлением некоторых данных.
Поскольку файлы сценариев загружались и выполнялись один за другим, большее количество файлов означало более длительное время загрузки. Поэтому люди начали предварительно обрабатывать свои javascript-приложения, используя сложные процессы сборки, которые сделали их приложения меньше и более оптимальными для повседневного использования в Интернете.
Эти оптимизации имеют свою цену. Файлы Javascript объединяются и минимизируются, чтобы получить меньший, в основном нечитаемый беспорядок, который на самом деле делает то, что задумал разработчик. Отладка может быть головной болью, даже при использовании исходных карт.
Модули Javascript, краткая история
Теперь давайте вернемся к сути. Модули Javascript были представлены еще в 2009 году и быстро стали популярными среди сообщества JavaScript. В основном существовало три подхода к определению и использованию модуля javascript.
CommonJS был первым и предназначался для использования в приложениях NodeJS. В начале разработки AMD отделилась от CommonJS. AMD использовалась в RequireJS, очень популярной библиотеке управления модулями, используемой во внешних приложениях. Последнее, UMD или «универсальное определение модуля», было предложено как универсальное решение, совместимое как с CommonJS, так и с AMD.
Что на самом деле представляют собой модули Javascript
Но хватит об истории. Что такое модули? По сути, это повторно используемые фрагменты кода, которые раскрывают именно то, что вы хотите, не больше и не меньше. Вы можете думать о них как о черных ящиках. Остальная часть приложения не знает внутренних процессов модуля. Он знает только то, что он может импортировать из модуля и как использовать импортированные материалы.
Модули Javascript имеют удивительное преимущество. Они очень хорошо помогают разделить проблему на более мелкие, более управляемые части. Таким образом, каждое приложение, каким бы сложным оно ни было, может управляться и организовываться таким образом, чтобы помочь разработчикам понять его внутреннюю функциональность и более быстро и надежно отлаживать и расширять приложение.
Модули Javascript до сих пор все еще требовали процесса сборки. Браузеры изначально не поддерживали их, поэтому их пришлось скомпилировать в простой, скучный javascript. Этот шаг был необходим не только потому, что модули не были известны браузерам, но и потому, что они пишутся в отдельных файлах.
Приложение приличного размера состоит из множества модулей. Это много-много файлов… это много-много секунд, за которые приложение будет загружаться в браузере, помните?
Асинхронная загрузка
Синхронная загрузка была проблемой. И люди активно работали над ее решением. В 2009 году был введен новый атрибут «асинхронный». Он предназначался для установки того, какие активы могут и должны быть загружены одновременно. Это был важный шаг, поскольку теперь не имело значения, сколько активов было встроено. Они будут загружаться одновременно, верно?
Браузеры постепенно начали внедрять эту новую функцию, и со временем встраивание большего количества файлов javascript становилось все меньшей и меньшей проблемой. Это проложило путь для собственных модулей javascript.
Браузеры начали поддерживать собственные модули javascript. Больше не нужно создавать и встраивать громоздкие большие скомпилированные файлы, которые выглядят как что-то из ночного кошмара C++. На самом деле сегодня большинство браузеров поддерживают модули javascript:
Фактически из десктопных браузеров его не поддерживает только Internet Explorer. Если подумать, это не является большим сюрпризом, потому что… вы знаете… Internet Explorer. Мобильная поддержка на сегодняшний день все еще немного шаткая, но быстро улучшается.
Используйте модули Javascript
Но как на самом деле выглядят javascript-модули? Вы включаете их на свою страницу, добавляя тег сценария «модуль»:
Вы также можете написать их прямо на своей странице, например:
Модули, которые определены как встроенные, являются вызывающими «голыми» модулями. Имейте в виду, что вы не можете импортировать их в другое место. Если вы хотите импортировать модуль, он должен иметь URL-адрес.
Также помните, что вам придется самостоятельно прикреплять функции к оконному объекту:
Теперь вернемся к восхвалению модулей. Это чрезвычайно крутая новая функция, поскольку она может упорядочить ваш код, очистить его и устранить необходимость в сложных процессах сборки.
Почему они будущее
Есть много других причин, по которым модули javascript в конечном итоге возьмут верх:
Они представляют собой встроенную поддержку условной загрузки кода.
Страница загружает только то, что нужно. Модули, не используемые на текущей странице, не будут загружены.
Они позволяют значительно оптимизировать код
даже если модули не минифицируются, если кодовая база правильно организована, код все равно будет оптимизирован.
Они упрощают отладку
поскольку модули (или должны быть) небольшими, нет необходимости в минимизации кода, и, таким образом, можно избежать исходных карт. Отладка становится намного проще, поскольку код, работающий в браузере, идентичен коду, который разрабатывался.
Вывод
Поскольку веб-приложения будут становиться все более и более сложными, потребность в простоте будет возрастать, и модули javascript являются инструментом для достижения этой цели.
Скомпилированный код уходит в прошлое и будет заменен модулями javascript. Конечно, это изменение не произойдет в одночасье, но оно произойдет. Что ты думаешь по этому поводу? Оставьте комментарий, чтобы я знал.
Ресурсы
Как всегда, вот некоторые ресурсы по темам, которые мы затронули в этой статье, но подробно не объясняли:
Амд и Коммонджс:
RequireJs
Асинхронный тег
