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