Чтобы понять текущую экосистему, вам, безусловно, нужно понять происхождение того, как JS долгое время использовался в сети. JavaScript существовал без синтаксиса модуля языкового уровня. Это не было проблемой, поскольку скрипты были небольшими. Но как богатые. клиентские приложения стали огромными, такие вещи, как разделение задач и совместное использование кода для повторного использования, были труднодостижимыми. Стало трудно справляться с конфликтами пространств имен в коде.
Есть два способа использовать JS и загрузить его в браузер:
Способ 1. Добавьте тег скрипта с атрибутом src, в котором хранится ссылка на внешний файл скрипта.
Способ 2: напишите встроенный JS и заключите его в теги скрипта (JS в HTML)
Возможное решение, направленное на решение проблем с большим скриптом, могло бы состоять в том, чтобы иметь отдельные маленькие файлы скрипта (достигнута модульность !! 😌) и просто загружать их с помощью тегов ‹script› на странице (используя способ 1).
<head> <title>Prepare a pancake</title> <script src=“pan.js”></script> <script src=“Grocery/ingredients.js”></script> <script src="procedure.js"></script> <script src=“kitchen/gas-stove.js”></script> </head>
Но подождите !! 😳, есть проблемы с таким подходом
Не масштабируется:
Возможно, вы пытаетесь загрузить слишком много скриптов. Тег ‹script› устанавливает новое http-соединение, а для небольших файлов установка соединения может занять значительно больше времени, чем передача данных. Пока скрипты загружаются, содержимое страницы нельзя изменить (иногда это приводит к возникновению Flash нестилизованного содержимого).
Проблемы с производительностью:
Кроме того, у каждого браузера есть узкие места: только определенное количество одновременных запросов может получать данные за один раз.
Раннее решение: рассматривайте каждый файл как IIFE (модуль выявления)
Шаблон раскрывающего модуля использовал IIFE, в которых каждый файл JS был обернут в IIFE, и их можно было безопасно объединить, не опасаясь коллизии областей видимости, т.е. вы должны написать 100 отдельных файлов сценариев, все завернутые в IIFE, объединить их, не опасаясь манипулирования переменные.
Этот шаблон привел к взрывному росту таких инструментов, как Make, Gulp, Grunt, Broccoli, Brunch, StealJS, которые помогли объединить файлы, обернутые IIFE.
Все еще проблемы существуют
- Полное перестроение: каждый раз, когда вы меняете один файл, вам нужно перестраивать его целиком.
- Устранение мертвого кода невозможно: когда вы просто объединяете файлы, как вы узнаете, что какой-то код не используется, и как бы вы его удалили.
- Многие IIFE являются медленными - IIFE заставляют JS-движки с нетерпением ждать синтаксического анализа кода. (Разбирать JavaScript - лучше ленивый, чем нетерпеливый)
- Нет динамической / ленивой загрузки: здесь вы отправляете весь код заранее, поэтому нет возможности ленивой загрузки.
И поэтому появилось несколько модульных систем вместе с загрузчиками в Javascript, чтобы помочь с модульностью и загружать модули по запросу.
Подробнее об этом в следующей части этой серии🪴