Organize Javascript files for a project

Question

I am working on a Web System with multiple screens and they have different functions in Javascript and several apply to only one page. How do I organize Javascript files? Best practice?

• Create a file for each page
• Create a file with all functions
• Another way?

Answer 1

The organization of your files depends on the type of project, size, existing modules, etc... Try to identify if your Java functions can be grouped into different files, for example:

In a project you have:

• Utility functions for string, date and numbers.
• Functions of data validation
• Processing functions

Then your structure can look like:

< your project
     < js
         < utils
                 < stringUtils.js
                 < numberUtils.js
                 < dateUtils.js
         < validation
                 < ....js
                 < ....js
         < process
                 < ....js
                 < ....js

Thus, we grouped our files into different files and into different directories. The project was well divided and intuitive. It’s just an example of organization for you to get an idea of how to build your structure.

EDIT: Managers

Depending on the structure of your project, it is indicated to use file managers to make your work easier. In some projects I use AngularJS, I usually use the RequireJS. The RequireJS manage all the dependencies of . js files importing them when needed.

Read about it here. This link also talks about optimizing.