How to structure a JavaScript project?

Question

I'm currently working on a big JavaScript project for which we want to define our own API. I'm using RequireJS as my dependency loader and it suits me just fine, allowing me to define modules in their respective file. I do not make use of my own namespace, a module returns an instance, which can be used in other modules, i.e.:

define(
    ['imported_module'],
    function(module){
        module.doSomething();
    }
)

However as the number of files grows, I'd like to decide how to structure these files in folders. Currently I use the following scheme to name my files:

[projectname].[packagename].[ModuleName]

An example could be stackoverflow.util.HashMap.js. I would like to introduce a project folder, a folder per package and rename the files to the module name, like:

stackoverflow/util/HashMap.js

This structures my code quite neatly into folders, however the filename reflects only the module now. I'd like to define some kind of routing to be able to define how RequireJS should look for files. Example:

The file

stackoverflow/util/stackoverflow.util.HashMap.js

Should be importable by the statement

define(['stackoverflow.util.HashMap'],function(HashMap){});

Has anyone experience with structuring large JavaScript projects and if so, could you share your approach?

You can probably do that with a custom plugin...something like use!stackoverflow.util.HashMap — blockhead
– blockhead, Commented Mar 5, 2012 at 16:17
As blockhead said: The plugin API has a "normalize" function that takes a name and translates it into a path. Take a look at: requirejs.org/docs/plugins.html#apinormalize — David
– David, Commented Mar 9, 2012 at 8:33

Chris Li · Accepted Answer · 2013-01-18 08:57:19Z

9

+50

You shouldn't specify the routing info on your js file names, those are the namespace and folder paths' jobs. So stackoverflow/util/HashMap.js is just fine. And you can use define("stackoverflow/util/HashMap", ....) to tell the dependency.

If you need to put your modules in a different folders, you can config paths for your loader, see this manual from RequireJS API.

There's no best way for structure your js files. But put the root namespace in a src folder is always a good practice. You can see the dojo source code and YUI source code and use similar ways for your project. They both are large scale Javascript projects.

edited Jan 18, 2013 at 8:57

answered Mar 9, 2012 at 8:16

Chris Li

3,7253 gold badges32 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thomaux Over a year ago

Thanks for your answer, I'll have a look at those sources! RequireJS's manual advises not to use named dependencies regarding the optimization tool.

Paul Rumkin · Accepted Answer · 2012-03-12 07:39:10Z

2

actually it's better to get js lib routing to load all js using standard interface: "js.yoursite.com/lib-0.2.js" there should be a router (php or other, and able to cache queries). So there you could determine and control whole pathes that you use. Because common jquery plugin should stay at one dir, with jquery, and your own custom plugins not.

And there you control each project by it's own rules:

jquery/
  plugins/
    jquery.prettyPhoto.js
  jquery.min.js

mySuperJS/
  stable.0/ -- there your production version for 1.0 branch
    module.js
  0.1/
    module.js
  0.2/
    module.js
  0.3/
    module.js

myOtherlib/
  stable.0/ -- production version for all 0.* versions
  stable.1/ -- production version for all 1.0 versions
  0.1/
  0.2/
  0.3/
  0.4/
  0.4.1/
  0.4.1.18/

We're using such structure around a year and it's the best for us. But sometimes we use more complex solution and separate all modules for libs, plugins, tools, components and apps.

answered Mar 12, 2012 at 7:39

Paul Rumkin

6,9052 gold badges29 silver badges36 bronze badges

1 Comment

thomaux Over a year ago

Thanks for your suggestion, although I'm afraid such a folder structure would not suit our project.

Collectives™ on Stack Overflow

How to structure a JavaScript project?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related