Coming from a classical OOP background I recently started to learn more about JavaScript. However, there is one thing I can't quite figure out:

In classical OOP languages you usually create a separate file for every class, since that makes it easier to maintain your code. JS doesn't have real classes, and as far as I know there also isn't a real straight forward way to include another JS file from one file. However, when you're working with a team on a large JS project you probably want to split the project into multiple files. How is this done? What do you put in those files and how do you make them load properly?

Coming from a classical OOP background I recently started to learn more about JavaScript. However, there is one thing I can't quite figure out:

In classical OOP languages you usually create a separate file for every class, since that makes it easier to maintain your code. JS doesn't have real classes, and as far as I know there also isn't a real straight forward way to include another JS file from one file. However, when you're working with a team on a large JS project you probably want to split the project into multiple files. How is this done? What do you put in those files and how do you make them load properly?

• javascript

4 Answers 4

I love your question. I write my JavaScript very Object Oriented and keep my object constructors in their own files. I throw all of my .js files into a directory which I can organize into subdirectories any way I want. Then I run a "make" script. The following is a Bash script I wrote. I work at a Linux machine, so Bash scripting is a natural solution for me any anyone working in Linux.

#!/bin/bash

echo '' > temp0.js 
find ./bin/external -name \*.js -exec cat {} >> temp0.js \;

echo ''> temp1.js
echo '(function(){' > temp1.js
find ./bin/prop -name \*.js -exec cat {} >> temp1.js \;
echo '})();' >> temp1.js

cat temp0.js temp1.js > script.js
rm temp1.js temp0.js

Forgive me if this bash scripting is amateurish. I'll readily admit in bash scripting I just hack together whatever works, but I like my JavaScript to be clean and organized and Object Oriented.

This bash script goes into a directory alongside a directory called "bin" which contains all the javascript .js files. In there, the subdirectory "external" contains various borrowed scripts like JQuery. I'm putting my own .js scripts in a folder called "prop" in the example above. The bash script gets all of these scripts and concatenates them. It also wraps my own prop files in an anonymous function to give them a private namespace (sortof).

I guess it's clear this isn't exactly what you wanted--Java--but I think this kind of option is what we have to make do with in JavaScript.

JavaScripts prototype model is very OOP and you are free to break up the code in as many files as you like. There are a few different ways to load dependencies, RequireJS being a popular one.

You'll have to segment the code in whatever way makes sense for your project.

As to how to include the scripts, that's more difficult. The simplest way is to just include multiple JavaScript files, either sequentially called from the HTML (<script src="..."></script><script src="..."></script>) or with a dependency manager or load script like Yepnope or RequireJS..

However, if you'd like to include just one script from your HTML, you can either concatenate the files (using a build script with Ant or something similar) or hack Javascript to include other scripts like described here: How do I include a JavaScript file in another JavaScript file?

You can group the files in any logical method you'd like. Typically it's done by feature - this file animates the logo, this file makes the homepage slideshow function, this file handles the navigation bar drop-downs. I'd imagine you'd typically have your team broken up into a similar organization, where each person is responsible for a particular feature. Beyond that, source control management works just like any other project, where users have to check out or commit code as they work on it.