Можете ли вы использовать несколько файлов .JS при разработке сложного приложения Javascript?

Исходя из фона С#, где каждый класс (лучшие практики) хранится в собственном отдельном файле, он делает разработку довольно чистой. Я никогда не писал ничего сложного в Javascript в прошлом, но начинаю изучать HTML 5, и я хочу написать сложную игру, используя холст HTML 5.

Помещение всех моих функций и кода в один файл .js кажется очень грязным. Есть ли способ разделить его или инструмент /IDE, который позволяет вам разрабатывать отдельные файлы и компилировать их в один для развертывания?

Думаю, я ищу советы по лучшей практике. Такие вопросы, как правило, закрываются, так что вот мои конкретные вопросы, чтобы придерживаться SO-FAQ, который требует практических, ответных вопросов:

  • Является ли сложная разработка JS, как правило, всем кодом, находящимся в одном JS файле? Например. вы пишете космических захватчиков, у вас просто есть spaceinvaders.js или у вас есть ship.js, logic.js и т.д.

  • Можно ли разделить JS (используя несколько тегов script или предварительно скомпилировать в один JS файл) или просто поместить все это в один файл?

  • Что такое отраслевой стандарт? Есть ли рекомендации HTML 5 какие-либо рекомендации?

Ответы

Ответ 1

Есть два возможных пути. Лично я бы использовал инструмент построения, чтобы упростить работу с несколькими файлами.

Использование инструмента построения

Grunt

Моим любимым инструментом для поддержки сложных js-приложений является grunt. С ворчанием вы можете развить столько файлов, сколько хотите, и использовать его плагины watch и concat для автоматического согласования их при сохранении. Вы можете сделать намного больше, но это основной вариант использования, который может быть вам полезен.

Grunt требует nodejs и занимает некоторое время для настройки. Но как только вы будете готовы с настройкой Gruntfile, это действительно ускорит процесс разработки.

Чтобы ваш проект был готов к использованию, вы можете также минимизировать свои сценарии с некоторой конфигурацией и одной командой.

Многие крупные библиотеки javascript используют grunt, легко узнаваемые на основе их Gruntfile: jQuery, AngularJS, Twitter Bootstrap и т.д.

Grunt также является частью инструментария разработки yeoman.

бранч

Brunch - еще один инструмент сборки, который позволяет вам делать похожие вещи, такие как grunt.

Загрузка только необходимых файлов

Если вы разрабатываете огромное одностраничное приложение и обеспокоены временем запуска вашего приложения, один файл может оказаться не лучшим решением. В этом случае вы можете использовать загрузчик модуля javascript.

Require.js

Для этого require.js является подходящей игрой. Он позволяет загружать только нужные файлы на текущей странице. Хотя настройка require.js - это немного больше работы, чем настройка grunt.

Ответ 2

Конечно, вы можете использовать несколько файлов javascript. Как еще будут работать библиотеки, такие как jQuery или Knockout?

Одна вещь, о которой нужно помнить, заключается в том, что одна из вещей, которые вы хотите сделать, чтобы ваши страницы были в состоянии мгновенно, - это сократить общее количество HTTP-запросов на каждую страницу. Добавление кучи файлов javascript, загружаемых отдельно, вызывает дополнительный запрос для каждого дополнительного файла. Поэтому вы можете поэкспериментировать с системой для своей сборки, которая сшивает ваши файлы javascript вместе в один элемент, который вы можете использовать при развертывании. Существует ряд решений, которые сделают это для вас автоматическим способом.

Ответ 3

вы могли бы рассмотреть использование requirejs - очень хороший libray для разделения вашего javascript на модули. он также предоставляет инструмент, который вы можете "объединить" все модули в один файл.

Ответ 4

Вы можете использовать столько файлов javascript, сколько хотите. Просто добавьте ссылку на них в код html:

<body style="background-color: black" onload="main();" >
    <!-- Your HTML body contents -->


    <!-- Your scripts (here, I used HTML5 BoilerPlate to setup, and the links to jquery are provided) -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
    <script src="js/main.js"></script>
</body>

Затем вы можете подключить ваш main.js для прослушивания вызова функции main():

function main() {
    //here you can do your basic setup or delegate the control of the app to a different .js file.
}

или обратный вызов готового документа jQuery:

$(document).ready(function() {
    //here is a good spot to hookup other jQuery listeners
});