Организация Js файлы проекта

Question

Я в точке в разработке html5 игры (плавание в направлении 500 строк в моих main.js), где я должен был бы разделить код на несколько частей. Я уже сгруппированы различные ВАР и функции от уместности и переехал эти блоки в, например, main.js - game.js - player.js - enemy.js, ЕСС ... и заставил их выполнять в правильном порядке, как HTML к «перекомпонуйте» главный файл я работаю сейчас, как это было до того, разделив его:

<script src="main.js"></script> 
<script src="game.js"></script> 
<script src="player.js"></script> 
<script src="enemy.js"></script> 

это будет работать нормально, но таким образом, все переменные будут доступны из консоли. Я пытался обернуть каждый отдельный сценарий в прямоприменяемой функцию, чтобы предотвратить это (как мой main.js в данный момент), но этот подход сделает переменный мне нужно быть глобально доступным выпадать из сферы. Так в чем же лучшая практика в этом случае? Я читаю много, но каждое найденное мной решение похоже на мои навыки js или слишком абстрактно для такого маленького проекта, как мой. Может ли кто-нибудь указать на правильное направление?

спасибо.

Answer 1

кажется, что вы боретесь с вопросом: How should I modularize my app?

Вместо определением каждой зависимости вашего приложения в HTML:

<script src="main.js"></script> 
<script src="game.js"></script> 
<script src="player.js"></script> 
<script src="enemy.js"></script> 

Было бы лучше, чтобы связать код с Webpack, Browserify, или какой-либо другой модуль. Таким образом, вам не нужно будет беспокоиться о заказе <script> тегов.

Вы бы тогда быть в состоянии включать в себя один <script> тег в вашем HTML:

<script src="bundle.js"></script> 

bundle.js Где находится файл, содержащий весь код приложения и никаких зависимостей сторонних вы можете использовать. Генерирование bundle.js может быть достигнуто с помощью модуля, как упомянуто выше.

В зависимости от выбранной вами поддержки соединителя модуля вы можете использовать модули таких типов, как CommonJS, AMD, ES6 и т. Д. Установив в коде код modules, вы сможете экспортировать объекты, функции и т. Д. и не загрязнять глобальное пространство имен. Таким образом, вы должны отделить приложение от одного гигантского файла.