5-минутное исправление спагетти-кода на стороне клиента
В настоящее время мы работаем над игрой WebGL с использованием библиотеки three.js, и за несколько дней у нас было 704 строки кода в одном файле, а игра была завершена всего на 5%.
Ощущение нажатия CMD+F в Sublime и ввода догадок имени функции было уже невыносимым. Что-то должно было измениться. Есть несколько решений:
- Содержит все модули внутри IIFY.
- Используйте модный упаковщик.
- Загружайте кучу файлов в тегах script и загрязняйте глобальное пространство имен (не рекомендую).
Еще одно быстрое и простое в реализации решение — RequireJS. Поскольку RequireJS инициализирует модули только один раз, это позволяет передавать одни и те же объекты в разные модули. Например, объект сцены может потребоваться передать модулю препятствий, чтобы его можно было добавить в сцену. Но объект сцены также должен быть передан средству визуализации, чтобы сцена могла быть визуализирована. Это гарантирует, что вы всегда работаете с одной и той же сценой.
Еще одним преимуществом этого подхода является то, что он упрощает управление зависимостями. Если вам нужно добавить звуковой модуль к модулю препятствий, но и звук, и препятствия должны быть добавлены в ваш app.js — RequireJS позаботится обо всем этом за вас.
// app.js define( ["three", "sound", "obstacle"], function ( THREE, sound, obstacle) { // do stuff with sound and obstacle } );
Кроме того, RequireJS позволяет очень легко скомпоновать модуль. Вы можете замаскировать каждый модуль всего одной строкой кода.
requirejs.config({
shim: {
"three": { exports: "THREE" }
}
});
Вам также не нужно создавать процесс сборки. Если у вас нет готового рабочего процесса для модуляции Javascript на стороне клиента, начальные затраты будут примерно такими же низкими, как и они.
Единственная проблема, с которой я столкнулся при использовании RequireJS с three.js, заключается в том, что есть несколько библиотек, которые работают в сочетании с three.js и требуют, чтобы THREE был доступен в глобальном пространстве. И поскольку одной из особенностей RequireJS является отсутствие утечки глобальной области видимости, это может вызвать проблему. Простое решение — создать модуль, который прикрепляет THREE к окну. Подробнее об этом можно узнать здесь.
Шаблон того, как настроить RequireJS с вашим приложением three.js, можно найти по этой ссылке:
https://github.com/felixpalmer/amd-three.js
И если у вас есть любимый метод организации вашего three.js или другого Javascript на стороне клиента, сообщите нам об этом в комментарии.
Wildebeest — продуктовая студия в Лос-Анджелесе, Калифорния. Эта статья написана Рэйчел Окимото, разработчиком интерфейса.
Иконка сделана Freepik с сайта www.flaticon.com