40

Coming from a C# background where every class is (best practices) stored in its own individual file, it makes development quite clean. I've never written anything complex in Javascript in the past, but I am starting to learn HTML 5 and I want to write a complex game using the HTML 5 canvas.

Putting all of my functions and code into a single .js file seems very messy. Is there a way to split it up, or a tool/IDE that lets you develop using separate files and compile them into a single one for deployment?

I guess I am looking for some best practice advice. Questions like this generally seem to get closed, so here are my specific questions to adhere to the SO FAQ that demands practical, answerable questions:

  • Does complex JS development usually involve all the code being in a single JS file? Eg. you're writing space invaders, do you just have spaceinvaders.js or do you have ships.js, logic.js etc.

  • Is it possible to split up your JS (whether using multiple script tags or pre-compiling to a single JS file) or to just put it all in a single file?

  • What's the industry standard? Does the HTML 5 spec make any recommendations?

NibblyPig
  • 51,118
  • 72
  • 200
  • 356
  • You can write your JS in separate files, but when it comes to deploying, it's more efficient to minify them all into a single file. For each script you load in your browser, you make a round-trip to the server, so it makes sense to minimize those. – Matt Burland Mar 29 '13 at 17:06
  • Also, take a look at, for example, [jquery source on github](https://github.com/jquery/jquery/tree/master/src). Lots of separate files, but they all get packaged up as a single file for deployment. – Matt Burland Mar 29 '13 at 17:09
  • Ah, thanks - I should have used JQuery as an example! If I can figure out how multiple people work on that, it will probably answer all my questions. Cheers. – NibblyPig Mar 29 '13 at 17:10
  • Possible duplicate: http://stackoverflow.com/questions/950087/include-javascript-file-inside-javascript-file – Anderson Green Mar 29 '13 at 17:10

4 Answers4

13

There two possible ways. Personally, I would use a build tool to simplify working with multiple files.

Using a build tool

Grunt

My favourite tool to keep up with complex js applications is grunt. With grunt you can develop in as many files as you want and use its plugins watch and concat to automatically concat them on save. You can do a lot more but this is the basic use case which may be helpful for you.

Grunt requires nodejs and takes some time to setup. But once you are ready with your Gruntfile setup it really speeds up your development process.

To make your project ready for production use you can also minify your scripts with some configuration and a single command.

A lot of the major javascript libraries are using grunt, easily recognizable based on their Gruntfile: jQuery, AngularJS, Twitter Bootstrap etc.

Grunt is also part of the development toolset yeoman.

Brunch

Brunch is another build tool which allows you to do similar things like grunt does.

Loading only the needed files

If you are developing a huge single page application and are concerned about the startup time of your application, one single file may not be the best solution. In this case you can use a javascript module loader.

Require.js

Therefor require.js is a goot fit. It allows you to only load the actual needed files on the current page. Though setting up require.js is a bit more work than setting up grunt.

Marcel Gwerder
  • 8,353
  • 5
  • 35
  • 60
4

Of course you can use more than one javascript file. How else would libraries like jQuery or Knockout function?

One thing to keep in mind, though, is that one of the things you want to do to keep your pages feeling snappy is to reduce the total number of http requests per page load. Adding a bunch of javascript files that are loaded separately causes an additonal request for each extra file. Therefore, you might want to experiment with a system for your build that stitches your javascript files together into a single item that you can use at deployment. There are a number of solutions out there that will do this for you in an automated way.

Joel Coehoorn
  • 399,467
  • 113
  • 570
  • 794
  • 1
    JQuery is just a single file. From my point of view that's awesome because I can get all that functionality with just a single script tag. But from a developer point of view, it would be an unmanagable nightmare wouldn't it, if the entire of JQuery was in a single file? I can't imagine my C# applications being all in one file. – NibblyPig Mar 29 '13 at 17:09
  • 1
    @SLC: As I said above, take a look at jquery on github. They don't develop it as a single file. – Matt Burland Mar 29 '13 at 17:10
  • @SLC that demonstrates both of my points: jQuery is only useful because you can access the jQuery object from other javascript files. It proves that this is possible (and easy). It also proves out my recommendation: you want a way to stitch your complicated javascript product into a single result. – Joel Coehoorn Mar 29 '13 at 17:11
  • Excellent, thanks. I'm going to investigate the tools suggested by the other people who have answered it and that should have me set for writing something! – NibblyPig Mar 29 '13 at 17:14
  • 1
    `jQuery` is actually also using `grunt`. Have a look at their [`Gruntfile`](https://github.com/jquery/jquery/blob/master/Gruntfile.js) – Marcel Gwerder Mar 29 '13 at 23:17
2

you could consider using requirejs - a very nice libray to split your javascript to modules. it also provide a tool that you can "combine" all modules to a single file.

thangcao
  • 1,819
  • 1
  • 13
  • 14
2

You can use as many javascript files as you want. Just add a link to them in your html code:

<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>

Then you can hookup your main.js to listen for the main() function call:

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

or the jQuery document ready callback:

$(document).ready(function() {
    //here is a good spot to hookup other jQuery listeners
});
Phil
  • 35,852
  • 23
  • 123
  • 164